html - 当您将鼠标悬停在 p 元素的不同部分时，如何使用 CSS 使 div 元素出现？

Question

我想知道是否有人可以帮助解决这个问题，我正在将鼠标悬停在 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;
}

Answer 1

同级选择器需要有相同的父级。因此，将链接和图像放在同一个父项中，例如:

    <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>