悬停文本时如何设置图像的悬停？

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%;
}

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

我怎样才能做到这一点？所以我希望中包含的所有元素在其中一个悬停时变为悬停状态。

Answer 1

检查此 FIDDLE 您只需添加此

a:hover {
text-decoration:underline;
}

.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;
}

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

悬停文本时如何设置图像的悬停？

How can I set my image's hover when hovering my text?

html

css

hover