javascript - 链接和文本不适用于隐藏和可见

Question

JSFIDDLE: https://jsfiddle.net/uj3uw9cp/1/

    body {
      color: white;
    }

    a {
      color: white;
      text-decoration: none;
    }

    #text-on-image {
      overflow: auto;
      position: absolute;
      top: 10%;
      left: 5%;
      transform: translate(-50%, -50%);
      margin-top: -10px;
      visibility: hidden;
    }

    img:hover {
      opacity: 0.8;
    }

    img:hover + #text-on-image {
      visibility: visible;
    }

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
  <a href="#"><i class="fa fa-facebook"></i></a>
  <p><strong>TEXT</strong>
  </p>
</div>

正如您在 JSFIDDLE 上的示例中看到的，当有人将鼠标悬停在图像上时，它会显示一个链接和一些文本。我的主要问题是，如果有人将鼠标悬停在文本或链接上，不透明度就会被删除。

所以我希望如果有人将鼠标悬停在链接或文本上，不透明度仍为 0.8。有什么建议吗？

Answer 1

修复不透明度

发生这种情况是因为当您悬停文本时，那将是悬停的元素，而图像将失去悬停。要解决这个问题，只需将整个 block 放入容器中并将悬停选择器放置到该元素上并选择其中包含的图像:

#container:hover > img {
    opacity: 0.8;
}

Updated solution/JSFiddle

body {
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

#text-on-image {
    overflow: auto;
    position: absolute;
    top: 10%;
    left: 5%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
    visibility: hidden;
}

#container:hover > img {
    opacity: 0.8;
}

#container:hover > img + #text-on-image {
    visibility: visible;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
    <div id="text-on-image">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <p><strong>TEXT</strong></p>
    </div>
</div>

其他建议

请记住，在 HTML5 中，元素具有语义含义。不要将它们用于默认样式。使用 CSS 实现所需的样式。

<strong>元素

The <strong> element represents a span of text with strong importance.

From W3C

对于它的样式，使用:font-weight: bold;

<i>元素

在一些图书馆中 <i>用于图标，但这违反了 HTML 规范。使用 <span>为此目的。

The <i> element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.

From W3C

对于它的样式，使用:font-style: italic;