Question

我的悬停效果有效但唯一的问题是，如果我的鼠标在一行中的任何部分上方，它将激活它。当我将鼠标悬停在图像上时，如何才能使其生效。

这是我的JSX代码：

regular_db

这是我的CSS代码：在这里，我已经掌握了一切，但唯一的问题是我无法弄清楚如何不让悬停受到我列中剩余空间的影响。如果我检查我的#photography，当我只想突出显示图像时，它就是整列。如果我改变

，它不会悬停

      <div className="container App">
    <Header />
    <div className="caption-style-1 row">
      <div className="hover-img col-md-6 col-sm-6 nopadding">
        <div id="photography">
          <img
            src={require("../img/chaps_1x.jpg")}
            className="image"
          />
          <div className="overlay">
            <div className="text">Photography</div>
          </div>
        </div>
      </div>
    </div>
    <h4>CONTACT</h4>
  </div>

Answer 1

MDN's Adjacent sibling combinator

/* Paragraphs that come immediately after any image */
img + p {
  font-style: bold;
}

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

Answer 2

替换此代码

.hover-img:hover .overlay {
opacity: 1;
}

带

.hover-img img:hover+.overlay {
    opacity: 1;
}

Answer 3

您可以使用以下样式css

执行此操作

#photography:hover overlay {
   opacity: 1;
}

<强>演示

＆＃13;

#photography:hover .overlay {
    opacity: 1;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin-left:auto;
    margin-right:auto;
    height: auto;
    width: 50%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0,0,0,0.65);
}

.text{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.nopadding{
    padding:0 !important;
}

＆＃13;

<div class="container App">
    <div class="caption-style-1 row">
      <div class="hover-img col-md-6 col-sm-6 nopadding">
        <div id="photography">
          <img src="https://test-ipv6.com/images/hires_ok.png" class="image" title="image" >
          <div class="overlay">
            <div class="text">Photography Photography Photography</div>
          </div>
        </div>
      </div>
    </div>
    <h4>CONTACT</h4>
</div>

＆＃13;

CSS我希望悬停效果只有当我将图像鼠标悬停在一列的行中时才会激活

3 个答案: