当只有按钮悬停时激活悬停在按钮内的图像上？
Posted
技术标签:
【中文标题】当只有按钮悬停时激活悬停在按钮内的图像上？【英文标题】：Activating hover on image inside button when only button is hovered over? 【发布时间】：2015-10-31 03:21:20 【问题描述】：如果我有一个带有图像的按钮，当光标悬停在按钮而不是图像本身时，如何激活图像悬停？
这是我目前所拥有的：
<button type="button" class="btn btn-normal"><img src="images/contents/123.png"onmouseover="this.src='images/contents/123-hover.png'" onmouseout="this.src='images/contents/123.png'" class="image" /></div>
css：
.btn-normal
background-color: #eee;
padding: 15px!important;
width: 250px;
margin-bottom:20px;
.btn-normal:hover
background-color: #ddd;
.image
background-color: #ccc;
.image:hover
background-color: #009fe3;
对此真的很茫然-感谢任何帮助！
【问题讨论】：
想不出使用 CSS 的方法。我认为 JS 是最佳选择。 要在按钮悬停时定位按钮内的图像，您可以使用.btn-normal:hover .image ...。
【参考方案1】：
试试这个 html 文件
<html>
<body>
<script type="text/javascript">
function mouseoverImage()
document.getElementById('img').src='images/contents/123-hover.png';
function mouseoutImage()
document.getElementById('img').src='images/contents/123.png';
</script>
<button class="btn btn-normal" onmouseover="mouseoverImage()" onmouseout="mouseoutImage()"><img id="img" class="image" src="images/contents/123.png"/></div>
【讨论】：
【参考方案2】：我想我已经用 css 解决了...我在想 background-image: 按钮应该可以工作。希望！...
【讨论】：
【参考方案3】：正如@Henrik 在上面的 cmets 中所建议的那样，.btn:hover .image 选择器应该适合您。我用您的代码创建了一个简单的fiddle。我在 btn 悬停时为图像元素添加了边框样式。它有效。
.btn:hover .imageborder:1px solid red;
【讨论】：
以上是关于当只有按钮悬停时激活悬停在按钮内的图像上？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮