Question

我有一个幻灯片，我希望#avada #admired #runner变得可见并在#a：hover时保持可见但是如果#b悬停，前3个图像将被隐藏，＃tin＃tin-2＃tin-3变得可见并保持可见，直到#a或#c：悬停等等

 <div class="layout layout-home">
   <div class="home-nav one-half"> 
     <ul class="home-menu one-half">
     <li id="a">hi</li>
       <li id="b">hi-2</li>
        <li id="c">hi-5</li>
      </ul>
  </div>

 <div class="home-slideshow">
    <div class="works">
      <div class="admired full-width">
         <img id="admired" src="images/admired.jpg">
      </div>
     <div class="avada full-width">
         <img id="avada" src="images/avada.jpg">
     </div>
     <div class="runner full-width">
         <img id="runner" src="images/runner.png">
     </div>
   </div>
 </div>
   <div class="works-2">
      <div class="tin full-width">
          <img id="tin" src="#">
      </div>
      <div class="tin-2 full-width">
          <img id="tin-2" src="#">
      </div>
      <div class="tin-3 full-width">
          <img id="tin-3" src="#">
      </div>
  </div>

<script>
$(function() {
$('#a').hover(function() {
$('#admired , #avada, #runner').css('opacity', '1');
}
function() {
$('#admired,#avada, #runner').css('opacity', '1');

});
});

(function() {
$('#b').hover(function() {
$('#tin,#tin-2,#tin-3').css('opacity', '1');
}, function() {
$('#tin,#tin-2,#tin-3').css('opacity', '1');
});
});
</script>

Answer 1

没有您的代码，我做了一个简单的例子。

里面有h1和p的4个div。我只隐藏了p（使用CSS），h1仍然可见，因此我们可以看到div的位置。

根据您的具体情况，您可以更改以下代码（使用不透明度，显示或可见性或使用JQ之类的幻灯片等隐藏整个div）。

接下来，我已经制作了一个JQ，让我们在CSS中使用了show类。并且，在悬停时，删除除了正在悬停的那个之外的每个其他div上的类show。

等等。如果第一个div具有类show，当将鼠标悬停在第二个div上时，它会将show提供给第二个div，并从先前悬停的一个（第一个div）中删除show类。所以第一个div被隐藏了

如果您正在寻找，请告诉我。我再说一遍......这段代码可以根据您的具体情况进行更改

    
    $("div").hover(function(){
          $(this).addClass('show')
           $(this).siblings().removeClass("show")
     
    })

div p{ display:none}
div.show p { display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<h1>ONE</h1>
<p>Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p>
</div>
<div class="two">
<h1>Two</h1>
<p>

Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p>
</div>
<div class="three">
<h1>three</h1>
<p>Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p>
</div>
<div class="four">
<h1>four</h1>
<p>Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p>
</div>

使其可见如果：悬停并在鼠标移出后保持悬停效果但在另一个元素悬停时放电

1 个答案: