Javascript 在不同div中的文本悬停上显示图像
我不熟悉HTML和CSS，我正在尝试在文本悬停上显示此（库存）图像 我已经看到了很多例子，当图像是div的子对象时，这是可行的，但是我想让它在div之间工作，最好是使用元素的id。 我相信我的CSS选择器是正确的，我不确定我试图做的是否无效。非常感谢您的帮助，我也乐于接受JavaScript解决方案 编辑：我正在寻找一个解决方案，悬停效果只对标签中的“重要文本”有效Javascript 在不同div中的文本悬停上显示图像,javascript,html,css,Javascript,Html,Css,我不熟悉HTML和CSS，我正在尝试在文本悬停上显示此（库存）图像 我已经看到了很多例子，当图像是div的子对象时，这是可行的，但是我想让它在div之间工作，最好是使用元素的id。 我相信我的CSS选择器是正确的，我不确定我试图做的是否无效。非常感谢您的帮助，我也乐于接受JavaScript解决方案 编辑：我正在寻找一个解决方案，悬停效果只对标签中的“重要文本”有效 <!DOCTYPE html> <html> <head> </head>
<!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>
重要文本其他文本等
#图一{
不透明度：0.0；
-webkit转换：所有500毫秒的易入易出；
-moz转换：所有500毫秒的输入输出都很轻松；
-ms转换：所有500ms的缓进缓出；
-o型过渡：所有500ms的缓进缓出；
过渡：所有500ms的缓进缓出；
}
#文本1：悬停+#图1{
/*可见性：隐藏；
显示：无*/
不透明度：1.0；
}
#图1{
过渡：所有500ms的缓进缓出；
}
.textcontainer+.gallerycontainer#图1{
不透明度：0；
}
.textcontainer:hover+.gallerycontainer#图1{
不透明度：1；
}
重要文本其他文本等
重要文本其他文本等
.厨房集装箱{
不透明度：0.0；
过滤器：α（不透明度=40）；
}
.textcontainer:hover~.gallerycontainer{
不透明度：1.0；
过滤器：α（不透明度=100）；
}