使它可见，如果：鼠标悬停后保持悬停效果，但如果另一个元素悬停放电

Question

我有一个幻灯片，我想#avada #admired #runner变得可见，并保持可见时，#A：悬停，但如果＃ b悬停第一3个图像变为隐藏和#tin＃锡-2＃锡-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

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

4 divs与h1和p里面。我只隐藏了p（使用CSS），h1仍然可见，因此我们可以看到div在哪里。根据您的具体情况

您可以更改下面的代码

下一个（使用不透明，显示或可见性或类似的slideToggle等JQ藏全的div），我做了一个JQ给人的div是徘徊在我曾用CSS设计过的类show。并且在悬停时，除了正在被徘徊的其他div以外的其他每个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>