Question

如果我有一个带有图像的按钮，当光标悬停在按钮上而不是图像本身时，如何激活图像悬停？

这是我到目前为止所做的：

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

真的对此感到茫然 - 感谢任何帮助！

Answer 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>

Answer 2

想想我已经用css弄清楚了......我正在思考背景图片：按钮应该可以正常工作。希望！...

Answer 3

正如@Henrik在上面的评论中所建议的，.btn：hover .image选择器应该适合你。我用你的代码创建了一个简单的fiddle。我在btn的悬停时为图像元素添加了边框样式。它有效。

.btn:hover .image{border:1px solid red;}

只有按钮悬停在按钮上时，激活悬停在按钮上的图像上？

3 个答案: