Question

嗨这是一个不同的场景。我有一个文本信息div，里面有一个div，我试图做的是显示文本信息中的div一旦你在另一个div上的a.link，但我尝试了不同的步骤或接近它仍然相同。即时通讯尝试使用CSS实现它因为我在javascript中不好但是如果你可以帮助我，我非常感激它:)

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

使用（〜和+）

使用纯CSS

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

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

＆lt; div class =＆＃34; text-info＆＃34;＆gt;＆lt; / div＆gt;应该紧跟在＆lt; a class =＆＃34; link＆＃34;旁边href =＆＃34;＆＃34;＆gt; hover me＆lt; / a＆gt;

或者它在css中不起作用你可以使用像.show（）和.hide（）这样的js函数

＆＃13;

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

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

一旦悬停到另一个div，显示div内容

2 个答案: