我是 HTML 和 CSS 新手，我正在尝试在文本悬停时显示此（库存）图像。我见过很多例子，当图像是 div 的子级时，这是有效的，但我想让它在 div 之间工作，最好是使用元素的 id。我相信我的 CSS 选择器是正确的，我不确定我想做的事情是否无效。感谢任何帮助，我也愿意接受 JavaScript 解决方案。编辑：我正在寻找一种解决方案，其中悬停效果仅适用于标签内的“重要文本”。<!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条经验 获得超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条经验 获得超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 关注
- 87 浏览
添加回答
举报
0/150
提交
取消