我是 HTML 和 CSS 新手，我正在嘗試在文本懸停時顯示此（庫存）圖像。我見過很多例子，當圖像是 div 的子級時，這是有效的，但我想讓它在 div 之間工作，最好是使用元素的 id。我相信我的 CSS 選擇器是正確的，我不確定我想做的事情是否無效。感謝任何幫助，我也愿意接受 JavaScript 解決方案。編輯：我正在尋找一種解決方案，其中懸停效果僅適用于標簽內(nèi)的“重要文本”。<!DOCTYPE html><html> <head> </head> <body> <div class="textcontainer"> <p> <a id="text1">Important text</a> other text etc </p> </div> <div class="gallerycontainer"> <img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/> </div> </body> <style> #fig1 { opacity: 0.0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } #text1:hover + #fig1 { /* visibility: hidden; display: none; */ opacity: 1.0; } </style></html>
2 回答
慕勒3428872
TA貢獻1848條經(jīng)驗 獲得超6個贊
這是一個解決方案。您需要遵循正確的選擇器鏈接
#fig1 {
transition: all 500ms ease-in-out;
}
.textcontainer + .gallerycontainer #fig1 {
opacity: 0;
}
.textcontainer:hover + .gallerycontainer #fig1 {
opacity: 1;
}
<div class="textcontainer">
<p> <a id="text1">Important text</a> other text etc </p>
</div>
<div class="gallerycontainer">
<img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
</div>
慕無忌1623718
TA貢獻1744條經(jīng)驗 獲得超4個贊
希望這可以幫助。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="textcontainer">
<p> <a id="text1">Important text</a> other text etc </p>
</div>
<div class="gallerycontainer">
<img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
</div>
</body>
<style>
.gallerycontainer {
opacity: 0.0;
filter: alpha(opacity=40);
}
.textcontainer:hover~.gallerycontainer {
opacity: 1.0;
filter: alpha(opacity=100);
}
</style>
</html>
- 2 回答
- 0 關(guān)注
- 130 瀏覽
添加回答
舉報
0/150
提交
取消