隱藏圖像當我選擇一個與顯示相關的分區

Question

嗨，我是新的網絡開發， 我想要類似於這個網站http://www.ezmetrology.com/。 您可以看到車身上有一些設備圖像，因此當您將鼠標懸停在一臺設備上時，它會在相關設備的div內容中顯示詳細信息。我想要的是，當我將鼠標懸停在汽車上時，應該隱藏其餘的設備。 是可能的嗎？

請幫助

謝謝

Answer 1

試試這個例子。將鼠標懸停在物品1和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>