将鼠标悬停在其他div上即可显示div内容

Question

Hi This is a different scenario. i have a text-info div with a div inside it what im trying to do is show the div inside the text-info once you hove the a.link on a different div but i tried different steps or approach its still the same. im trying to make it happen using css because im not good in javascript but if you can help me out, i greatly appreciate it :)

CSS

#economics, #workforce{
  display: none;
}

    a.link:hover ~ .text-info #economics {
    display: block !important;

}
a.link:hover + .text-info #economics {
display: block !important;

}

HTML

  <div class="row">
    <!-- Main Div -->
    <div class="col-md-12 mainpsg">
    <!-- End Main Div -->

      <!-- First Main Div -->
      <div class="col-md-5 mainpsg-desc col-sm-5 animated fadeInLeft">

            <div class="text-info">
              <div id="economics">blabla sadasdasdsadas</div>  <!-- show this div when hover from the a.link-->
              <div id="workforce">blablabla</div> <!-- show this div when hover from the a.link-->
            </div>

      </div>
      <!-- END First Main Div -->

      <!-- SECOND Main Div -->
      <div class="col-md-7 main-entrypg col-colang">
      <div class="colcolvan">


      <a href="" class="link" id="una" target="_blank">

        <div class="entry-gorup eg-01">
          <img src="<?php echo get_template_directory_uri(); ?>/img/1.png" class="first-img animated fadeInDown">
          <div class="hover-link animated fadeInUp">
            <img src="<?php echo get_template_directory_uri(); ?>/img/external-link-symbol.png">
          </div>
        </div>

      </a>

      </div>
      </div>
      <!-- END SECOND Main Div -->


    <!-- Main Div -->
    </div>
    <!-- End Main Div -->

  </div>
</div>

Answer 1

<script>
$(document).ready(function() {
    $('#second, #third').hover(function(){
        $('#economics').addClass('show');
    },
    function(){
        $('#economics').removeClass('show');
    });
});
</script>

Answer 2

To work with pure css using(~ and +)

 a.link:hover ~ .text-info{display:block;}

 a.link:hover + .text-info{display:block;}

The <div class="text-info"></div> should follow right next to the <a class="link" href="">hover me</a>

or else it with not work in css you can use js function like .show() and .hide()

 $(document).ready(function(){ $('.link').on('mouseover', function(){ $('.text-info').show(); }); $('.link').on('mouseout', function(){ $('.text-info').hide(); }); }) 

 .link2:hover ~ .text-info2{display:block; transition:all 0.5s ease-in;} .test:hover + .show{display:block;} .show{display:none;} .text-info{display:none;} .text-info2{display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="link" id="una" target="_blank">HOVER ME! (JS)</a> <div class="text-info"> <div id="economics">blabla sadasdasdsadas</div> <div id="workforce">blablabla</div> </div> <br/> <br/> without jquery or javascript : to do this your hidden element should be the next element of the other triggering element <a href="#" class="test">trigger show (~, +) in css</a><span class="show">I will show up if you hover the ahead element.</span> <br/> <br/> <font class="link2">HOVER ME! (CSS) </font> <div class="text-info2"> <div id="economics">blabla sadasdasdsadas</div> <div id="workforce">blablabla</div> </div>