CSS懸停在點上以顯示圖像 - 不在圖像上懸停

我正在創建一個銷售頁面，其中會有幾個產品photoshopped放到背景圖像上。我希望客戶能夠將鼠標懸停在產品上的某個點上，以顯示其信息幷包含類似於http://www.wineenthusiast.com/custom-cellars/的鏈接，但我希望在純CSS中執行此操作。我只希望信息和鏈接出現在用戶懸停在點上，然後在包含div上。我一直遇到的問題是，因爲兩個元素都包含在同一個div中，所以會顯示相應的圖像。當此頁面上有15種產品時，這會太麻煩。仍然是noob編碼器，所以任何幫助將不勝感激，謝謝！CSS懸停在點上以顯示圖像 - 不在圖像上懸停

這裏的小提琴：http://jsfiddle.net/jakvisualdesign/hvb77m8L/2/

和代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<link rel="stylesheet" href="style.css"> 
<title>JS Bin</title> 
</head> 
<body> 
<div id="container"> 

<div class="base"> 
    <img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg" /> 
</div> 
<div class="pop-container-a"> 
    <img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg"> 
    <div class="dot"></div> 
</div> 
</div> 
</body> 
</html>

和CSS： #container的{ 位置：相對; width：960px; margin-left：auto; margin-right：auto; }

.base { 
width: 100%; 
height: 100%; 
position: absolute; 
} 

#container.pop-container-a img { 
position: absolute; 
} 

.dot { 
width: 10px; 
height: 10px; 
position: absolute; 
background-color: red; 
z-index: 10; 
border-radius: 50%; 
} 

.pop-container-a img { 
position:absolute; 
opacity: 0; 
width: 150px; 
transition: opacity .5s ease; 
} 

.pop-container-a:hover .dot, .pop-container-a:hover img { 
opacity: 1; 
} 

.pop-container-a { 
position: absolute; 
top: 100px; 
left: 50px; 
display: inline-block; 
}

來源

2015-04-03 jakvisualdesign

請編寫您的JavaScript代碼。 – Kumar 2015-04-03 09:32:01

修正爲你：http://jsfiddle.net/hvb77m8L/3/

訣竅是使用adjacent sibling selector+，使徘徊在點影響旁邊的圖像。所以，這樣的：

.pop-container-a:hover .dot, .pop-container-a:hover img { 
    opacity: 1; 
}

變成這樣：

.dot:hover + img { 
    opacity: 1; 
}

編輯：，而且從此立即選擇一個元素以下目標之一，也注意到，我改變了這一點：

<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg"> 
    <div class="dot"></div>

對此：

<div class="dot"></div> 
    <img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">

編輯2：，使圖像保持在盤旋時，你可以讓他們不活動的默認設置其寬度爲0：

.pop-container-a img { 
    opacity: 0; 
    width: 0; // in addition to being invisible, the image will not respond to hovering 
    position: absolute; 
    transition: opacity .5s ease; 
}

然後，當點盤旋，返回圖像以正常的寬度和正常不透明度：

.dot:hover + img { 
    width: 150px; 
    opacity: 1; 
}

而當影象處於這種狀態時，它現在可以與懸停效果保持在那裏：

.dot + img:hover { 
    width: 150px; 
    opacity: 1; 
}

一個新的小提琴來證明這一點：http://jsfiddle.net/hvb77m8L/6/

來源

2015-04-03 02:47:42 wavemode

非常感謝你的wavemode，這非常完美！ – jakvisualdesign 2015-04-03 17:38:40

另一個問題：現在，當我想將鼠標懸停在隱藏的圖像上時，它會消失。還有什麼我可以做，以便它保持？謝謝。 – jakvisualdesign 2015-04-03 17:55:22

@jakvisualdesign當然，我編輯來解決這個問題。 – wavemode 2015-04-03 18:21:54

CSS懸停在點上以顯示圖像 - 不在圖像上懸停

回答

相關問題