Question

完全空白，无法在Google上找到答案-我认为这是老年。

我的问题：

当用户将鼠标悬停在按钮上时，我想使用CSS创建的按钮来更改同一页面上的图像。

最终，我将有3个按钮，每个按钮下方都有一个图像。当用户在每个按钮上进行鼠标悬停时，其下方的相应图像将从灰度变为彩色。

我可以使它适用于链接，但是如果将类应用于CSS样式的按钮，则该按钮也会变为灰度，这是我不想发生的。此按钮样式应独立于应用于图像状态的样式。

CSS：

.image1 {-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}   
.image1:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}


.image2{-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}
.image2:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}

.image3{-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}
.image3:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}

HTML：

<a href="#" class="image1">THIS WILL BE A BUTTON</a>
<br>

<img src="testimage.png" class="image1">

<a href="#" class="image2">THIS WILL BE A BUTTON</a>
<br>

<img src="testimage.png" class="image2">

<a href="#" class="image3">THIS WILL BE A BUTTON</a>
<br>

<img src="testimage.png" class="image3">

Answer 1

如果您跳过之间的'next sibling'标签，可以使用'<br>'选择器来更改图像（使用CSS在它们之间添加空格）：

<a href="#" class="image1">THIS WILL BE A BUTTON</a>
<img src="testimage.png" class="image1">

现在将“悬停”选择器添加到“ <a>”：

a.image1:hover + img{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */

如果是下一个兄弟姐妹，则应该更改图像。

Answer 2

您需要执行以下操作：

.image {-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}   
.image:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}


/*When you hover a link, make the image color*/

.image-link:hover + .image {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

<a href="#" class="image-link">THIS WILL BE A BUTTON</a>

<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" class="image">

<a href="#" class="image-link">THIS WILL BE A BUTTON</a>

<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" class="image">

<a href="#" class="image-link">THIS WILL BE A BUTTON</a>

<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" class="image">

您基本上将元素设置为悬停，然后点击要更改的元素。

此处有更多信息：How to affect other elements when a div is hovered

使用链接或CSS按钮更改悬停时的图像

2 个答案: