Question

我正在为项目设计一些侧面按钮，希望链接两个元素的悬停样式，但是不确定如何进行此操作。在下面的示例中，如果我突出显示链接名称（搜索），它将滚动并更改为红色文本，如果突出显示该图像，则它将按预期更改为过渡图像。但是，我想要实现的是将两者都链接起来，所以当我将鼠标悬停在图标上时，链接也会变为红色，反之亦然。

#linkchoice{
    width:100px;
    height:100px;
  }
#image{
    height:75px;
    background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
    background-repeat:no-repeat;
    background-size:75px 75px;
    background-position:center;
  }	
#linkname{
    font-size:15px;
    text-align:center;
  }	
#image:hover{
    background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
  }	
#linkname:hover{
    color:#EB0307;
  }

<div id='linkchoice'>
    <div id='image'></div>
    <div id='linkname'>Search</div>
</div>

我也在这里做了一个JSFiddle

https://jsfiddle.net/bzsvgwp8/

谢谢

Answer 1

只需从

更新您的css

#image:hover {
  background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}

#linkname:hover {
  color: #EB0307;
}

到

#linkchoice:hover #image {
  background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}

#linkchoice:hover #linkname {
  color: #EB0307;
}

您将看到组合的悬停效果！

Answer 2

第一个解决方案是在父div上使用悬停：

#linkchoice {
    width:100px;
    height:100px;
  }
#image{
    height:75px;
    background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
    background-repeat:no-repeat;
    background-size:75px 75px;
    background-position:center;
  }	
#linkname{
    font-size:15px;
    text-align:center;
  }	
#linkchoice:hover #image {
    background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
  }	
#linkchoice:hover #linkname {
    color:#EB0307;
  }

<div id='linkchoice'>
    <div id='image'></div>
    <div id='linkname'>Search</div>
</div>

在第二种解决方案中，您可以通过以下方式使用单个div简化html：

#linkchoice{
    width:100px;
    height:100px;
  }
#linkname{
    height:75px;
    background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
    background-repeat:no-repeat;
    background-size:75px 75px;
    background-position:top;
    padding-top:75px;
    font-size:15px;
    text-align:center;
  }	
#linkname:hover{
    background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
    color:#EB0307;
  }

<div id='linkchoice'>
    <div id='linkname'>Search</div>
</div>

悬停链接样式

2 个答案: