html - 将鼠标悬停在 img 上时如何更改另一个类的外观？

Question

我目前正在尝试仅使用 HTML/CSS 的基本知识来构建我的网站。

http://www.ufo.studio

我正在尝试设置 CSS，以便当用户将鼠标悬停在主页上的主要案例研究图像上时，并显示带有下划线。

这是主页上一个 block 的 HTML 部分:

—

<div class="asos_content">
<a href="/projects/asos_creates.html">  
       <img src="img/home/ASOS_home.gif" class ="wow animated fadeInUp imgroll">

           <title class="wow animated fadeIn">ASOS Agency Brand Identity</title>

          <tags class="wow animated fadeIn">Strategy, Art Direction & Design</tags>
</a>
</div class="asos_content">

—

理想情况下，如果用户将鼠标悬停在 img 上，那么下划线也会同时出现在标题和标签下方。

这可以使用 CSS 吗？非常感谢任何帮助..

非常感谢。 本

Answer 1

您在周围的 a 元素上使用 :hover 伪选择器，然后选择适当的子元素并应用适当的属性。

例如:

.asos_content a:hover title,
.asos_content a:hover tags
{
  text-decoration: underline;
}

请注意，title 和tags 不是标准的 HTML 元素。它们可能更好地表示为 h1 和 h2 或其他一些标题元素。