Question

CSS的新手，需要一些帮助！我想将鼠标悬停在某些文本上，并将我的图像显示在我页面上的特定位置，而不是在文本周围弹出。我尝试改变照片的位置，但无论我尝试什么，它都停留在同一个地方，在文本周围盘旋。非常感谢您的帮助！

#image {
  display: none;
  position: relative;
  right: 10%;
}

#text:hover+#image {
  display: block;
}

<div id="hotlistContainer" class="col-md-6">
  <div class="col-md-5">
    <p id="text">Some Text</p>
    <div id="image"><img src="https://via.placeholder.com/350x150"></div>
  </div>
</div>

Answer 1

将图像的位置更改为absolute。

＆＃13;

#image {
    display: none;
    position: absolute;
    right: 10%;
}

#text:hover + #image {
    display: block;
}

＆＃13;

<div id="hotlistContainer" class="col-md-6">
    <div class="col-md-5">
        <p id="text">Some Text</p>
        <div id="image">
            <img src="https://via.placeholder.com/350x150">
        </div>
    </div>
</div>

＆＃13;

Answer 2

尽管hungersoft回答了问题，但这里的css代码只有几行。只有在 #text 悬停时才会显示图像。不是全线。

＆＃13;

#image {
          display: none;
          position: absolute;
          right: 10%;
        }
        #text {
    width: 70px;
    }
    
    #text:hover+#image {
      display: block;
    }

＆＃13;

<body>
<div id="hotlistContainer" class="col-md-6">
  <div class="col-md-5">
    <p id="text">Some Text</p>
    <div id="image"><img src="https://via.placeholder.com/350x150"></div>
  </div>
</div>
</body>

＆＃13;

Answer 3

仅相对于绝对更改位置，然后您可以移动图像你想要的地方，比如这个

#image {
  display: none;
  position: absolute;
  right: 10%;
  top:100px;
}

#text:hover + #image {
  display: block;
}

<div id="hotlistContainer" class="col-md-6">
  <div class="col-md-5">
    <p id="text">Some Text</p>
    <div id="image"><img src="https://via.placeholder.com/350x150"></div>
  </div>
</div>

使用CSS Hover的特定位置的静态图像位置

3 个答案: