[Solved]-How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?-Highcharts

You can make it using Highcharts.SVGRenderer which allows you to plot a rectangle and Highcharts.SVGElement.on method which allows you to add events on SVG elements (for example series group). Check demo and code posted below.

Code:

  chart: {
    type: 'xrange',
    backgroundColor: '0C0D19',
    renderTo: 'container',
    marginRight: 100,
    events: {
      load: function() {
        var chart = this,
          series = chart.series[0],
          seriesSvg = series.group,
          seriesSvgBBox = seriesSvg.getBBox(),
          width = 80,
          height = seriesSvgBBox.height,
          y = chart.plotTop + seriesSvgBBox.y,
          x,
          tooltip;

        seriesSvg.on('mousemove', function(e) {
          if (tooltip) {
            tooltip.destroy();
          }

          x = e.offsetX - width / 2

          tooltip = chart.renderer
            .rect(x, y, width, height)
            .attr({
              fill: 'rgba(255, 255, 255, 0.2)'
            })
            .css({
              'pointer-events': 'none'
            })
            .add()
            .toFront();
        });

        seriesSvg.on('mouseout', function(e) {
          tooltip.destroy();
          tooltip = null;
        });
      }
    }
  }

Demo:
http://jsfiddle.net/BlackLabel/z2h59pLf/2/

API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on