Question

嗨，我是网络开发的新手，我想要与此网站http://www.ezmetrology.com/类似的内容。您可以看到车身上有一些设备图像，因此当您将鼠标悬停在一个设备上时，它会在相关设备的div内容中显示详细信息。我想要的是当我从车上鼠标悬停一个设备时，它应该隐藏其余的设备。那可能吗？

请帮助

谢谢

Answer 1

试试这个例子。将鼠标悬停在item1和item2上，然后更改其内容

$(document).ready(function(){
$('.clickButtons').mouseover(function() {
  $(this).siblings().toggleClass("vis");
  $("div.textC").attr('style','visibility:hidden;')
     var index = $("li").index(this); $("div.textC").eq(index).attr('style','visibility:visible;')
});
  $('.clickButtons').mouseleave(function() {
  $(this).siblings().toggleClass("vis");
});
});

div#blueOne p{
  color:blue;
}
div#redOne p{
  color:red;
}
div#redOne{
  visibility:hidden; 
}
.textC p{
  position:absolute;
  top:5px;
  width:60%;

}
.imageC{
  position:absolute;
  top:5px;
  right:20px;
  height:90px;
}

.clickButtons{
  cursor:pointer;
  width:100px;
  background-color:grey;
  margin:5px;
}
.clickButtons.vis{
  visibility:hidden;
}
.textCon{
  position:relative;
  margin-top:40px;
  width:100%;
  border:1px solid black;
  height:100px;
  padding:0 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class="clickButtons">Item 1</li>
    <li class="clickButtons">Item 2</li>
    </ul>
  <div class="textCon">
  <div id="blueOne" class="textC"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><img class="imageC" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2a/Nature-a.jpg/240px-Nature-a.jpg"/></div>
    <div id="redOne" class="textC"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy..</p><img class="imageC" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></div>
  </div>
  </div>

当我选择一个＆amp;显示相关div

1 个答案: