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

时间：2018-08-15 00:59:33

标签： html css

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

3 个答案:

答案 0 :(得分：2)

同级选择器必须具有相同的父级。因此，将链接和图像放在同一父对象中，例如：

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

答案 1 :(得分：0)

发生了一些错误的事情，让我指导您

  1. +选择器选择元素，在这种情况下进行选择.m1:hover + .HL1意味着在m1类之后选择hl1类，因此只要这样的结构就无法使用
  2. 没有css选择器可以选择其父级，因此不可能像这样
  

给我一​​些JS

这是一些不更改css但html的代码

.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;
    color:red
}

.m3:Hover + .HL3 {
    visibility: visible;
}

.m4:Hover + .HL4 {
    visibility: visible;
}
<a id="Ms" align="center" class="m1">Home</a>
<div class="HL1"><img src="https://picsum.photos/200/300"  /></div>

<a class="m2" href="Bio.html">About</a>
<div  class="HL2" ><img src="https://picsum.photos/200/300"/></div>

<a class="m3" href="Services.html">Services</a>
<div class="HL3"><img src="https://picsum.photos/200/300"  /></div>

<a class="m4" href="Contact.html">Contact</a>

<div class="HL4" ><img src="https://picsum.photos/200/300" /></div>

答案 2 :(得分：0)

您的意思是通过将布局恢复为设置的方式来使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>

相关问题
最新问题