Question

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

http://www.ufo.studio

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

以下是主页上一个块的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

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

例如：

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

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

Answer 2

使用“悬停”拍摄。如果您愿意，可以在此处获取有关其工作原理的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

HTML：

 <span class="wow">Some Text That will be underlined when you hover</span>

CSS：

    .wow:hover {
        text-decoration: underline;
    }

这是一个jsfiddle：https://jsfiddle.net/wgny00xo/

Answer 3

您尝试做的事情对CSS来说并不可行，因为样式只会嵌套嵌套标记。

你可以做的是添加一个快速的javascript片段，以达到你想要的相同结果。

＆＃13;

function onRoll() {
  document.getElementsByTagName("h1")[0].style.textDecoration = 'underline';
  document.getElementsByTagName("h2")[0].style.textDecoration = 'underline';
}

＆＃13;

h1 {
  text-decoration: none;
  }

＆＃13;

<div class="asos_content">
  <a href="/projects/asos_creates.html">
    <img src="img/home/ASOS_home.gif" onmouseover="onRoll()" class="wow animated fadeInUp imgroll"/>

    <h1 class="wow animated fadeIn">ASOS Agency Brand Identity</h1>

    <h2 class="wow animated fadeIn">Strategy, Art Direction &amp; Design</h2>
  </a>
</div>

＆＃13;

如何在img上悬停时更改另一个类的外观？

3 个答案: