Question

我有以下html：

<a href="link.html" >
        <img src="image.png class="bw" ></img>
        Some text
    </a>

与css相关：

.bw { /* Effects on images */
  -webkit-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
     -moz-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
       -o-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
      -ms-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
          transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
}
.bw:hover {
  -webkit-filter: grayscale(100%);
  border: 5px solid #808080;
  border-radius: 50%;
}

因此，当我将鼠标放在我的图像上时，它会变成灰色，这就是预期的结果。但是，我的文字和我的图片是链接的一部分。当我的鼠标悬停在我的图像上时，文本会加下划线，但它不会以其他方式工作。当我的鼠标悬停在文本上时，我希望我的图像变成灰色。

我怎样才能实现这一目标？因此，如果其中一个元素悬停，我希望其中包含的所有元素都会被徘徊。

Answer 1

选中此FIDDLE您只需添加此

a:hover {
text-decoration:underline;
}

＆＃13;

.bw {
    /* Effects on images */
    -webkit-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
    -moz-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
    -o-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
    -ms-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
    transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
}
a:hover img {
    -webkit-filter: grayscale(100%);
    border: 5px solid #808080;
    border-radius: 50%;
}
a:hover {
    text-decoration:underline;
}
a {
    text-decoration:none;
}

a{
    display:inline-block;
}

＆＃13;

<a href="link.html">
        <img src="http://placekitten.com/300/301" class="bw" ></img>
        Some text
    </a>

＆＃13;

如何在悬停文字时设置我的图像悬停？

1 个答案: