如何使用CSS使div元素在您将鼠标悬停在p元素的不同部分时出现？
如何使用CSS使div元素在您将鼠标悬停在p元素的不同部分时出现？
提问于 2018-08-15 08:59:33
我想知道有没有人能帮我解决这个问题，我正在做的是悬停在p元素的不同部分上？我不确定我的编码是否正确，但我一直在寻找类似问题的不同答案，但它们都不适用于我。我有一个菜单，我正在尝试让div显示在每个单词的后面。现在我有一个段落中的选项，到目前为止，它只显示在“主页”选项上。有没有人可以告诉我，如果我需要重新编码我的菜单，让它工作，或者是否可以在我目前的编码方式？
谢谢
更新#2：感谢大家的建议。我选择了MichaelvE的想法作为我的问题的解决方案。现在我只需要将我的布局修复到我使用这个新代码之前的方式。再次感谢大家的帮助！
HTML：
<p id="Ms" align="center" class="m1">Home</a>
<a class="m2" href="Bio.html">About</a>
<a class="m3" href="Services.html">Services</a>
<a class="m4" href="Contact.html">Contact</a>
</p>
<div><img src="../Online Portfolio site/images/header highlight.jpg" class="HL1" /></div>
<div><img src="../Online Portfolio site/images/header highlight.jpg" class="HL2" /></div>
<div><img src="../Online Portfolio site/images/header highlight.jpg" class="HL3" /></div>
<div><img src="../Online Portfolio site/images/header highlight.jpg" class="HL4" /></div>CSS编码：
.HL1 {
position: absolute;
top: 100px;
left: 330px;
height:50px;
width: 150px;
visibility:hidden;
}
.HL2 {
position: absolute;
top: 100px;
left: 565px;
height:50px;
width: 150px;
visibility:hidden;
}
.HL3 {
position: absolute;
top: 100px;
left: 800px;
height:50px;
width: 150px;
visibility:hidden;
}
.HL4 {
position: absolute;
top: 100px;
left: 1050px;
height:50px;
width: 150px;
visibility:hidden;
}
.m1:Hover + .HL1 {
visibility: visible;
}
.m2:Hover + .HL2 {
visibility: visible;
}
.m3:Hover + .HL3 {
visibility: visible;
}
.m4:Hover + .HL4 {
visibility: visible;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-15 09:21:52
同级选择器需要具有相同的父级。因此，将链接和图像放在同一个父级中，如下所示：
<div style="text-align: center">
<a id="Ms" class="m1">Home</a>
<a class="m2" href="Bio.html">About</a>
<a class="m3" href="Services.html">Services</a>
<a class="m4" href="Contact.html">Contact</a>
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL1" />
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL2" />
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL3" />
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL4" />
</div>另外，使用常规同级选择器~而不是相邻同级选择器+：
.m1:Hover ~ .HL1 {
visibility: visible;}完整示例
.HL1 {
position: absolute;
top: 100px;
left: 330px;
height:50px;
width: 150px;
visibility:hidden;
}
.HL2 {
position: absolute;
top: 100px;
left: 565px;
height:50px;
width: 150px;
visibility:hidden;
}
.HL3 {
position: absolute;
top: 100px;
left: 800px;
height:50px;
width: 150px;
visibility:hidden;
}
.HL4 {
position: absolute;
top: 100px;
left: 1050px;
height:50px;
width: 150px;
visibility:hidden;
}
.m1:Hover ~ .HL1 {
visibility: visible;
}
.m2:Hover ~ .HL2 {
visibility: visible;
}
.m3:Hover ~ .HL3 {
visibility: visible;
}
.m4:Hover ~ .HL4 {
visibility: visible;
}<div style="text-align: center">
<a id="Ms" class="m1">Home</a>
<a class="m2" href="Bio.html">About</a>
<a class="m3" href="Services.html">Services</a>
<a class="m4" href="Contact.html">Contact</a>
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL1" />
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL2" />
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL3" />
<img src="../Online Portfolio site/images/header highlight.jpg" class="HL4" />
</div>
Stack Overflow用户
发布于 2018-09-07 07:32:15
您的意思是，通过将布局恢复到您设置的方式，您希望img标记位于它们自己的div中？如果是这样，我有一个下面的解决方案。如果不是，我不太确定你想要实现什么样的布局。
#Ms {
text-align: center;
}
.HL1 {
position: absolute;
top: 100px;
left: 330px;
height: 50px;
width: 150px;
visibility: hidden;
}
.HL2 {
position: absolute;
top: 100px;
left: 565px;
height: 50px;
width: 150px;
visibility: hidden;
}
.HL3 {
position: absolute;
top: 100px;
left: 800px;
height: 50px;
width: 150px;
visibility: hidden;
}
.HL4 {
position: absolute;
top: 100px;
left: 1050px;
height: 50px;
width: 150px;
visibility: hidden;
}
.m1:Hover~.HL1 {
visibility: visible;
}
.m2:Hover~.HL2 {
visibility: visible;
}
.m3:Hover~.HL3 {
visibility: visible;
}
.m4:Hover~.HL4 {
visibility: visible;
}<div id="Ms">
<span class="m1">Home</span>
<a class="m2" href="Bio.html">About</a>
<a class="m3" href="Services.html">Services</a>
<a class="m4" href="Contact.html">Contact</a>
<div class="HL1"><img src="../Online Portfolio site/images/header highlight.jpg" /></div>
<div class="HL2"><img src="../Online Portfolio site/images/header highlight.jpg" /></div>
<div class="HL3"><img src="../Online Portfolio site/images/header highlight.jpg" /></div>
<div class="HL4"><img src="../Online Portfolio site/images/header highlight.jpg" /></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51851575
复制相关文章
相似问题