pic {your css}

Question

我的网站上有一些按钮，当它们悬停在它们上面时它们都应该是透明的，但是一个按钮上的图像会改变另一个按钮上的图像。例如：按钮1有一个盾牌。然后我会让按钮2有一把剑。当我回头看按钮1时，它也会有一把剑而不是盾牌。我对编码不是很有经验，所以非常感谢帮助。 -谢谢。这是我用它的代码：

<a href="http://www.theuffclan.enjin.com/page404">
<!DOCTYPE html> <html > 
<head> 
<style type="text/css"> 
.pic { 
width:312px; 
height:250px; 
opacity: 1; 
filter: alpha(opacity=100); 
background: url(http://i.imgur.com/qLQkmOC.png) no-repeat; 
} 
.pic:hover { 
opacity: 0.3; 
filter: alpha(opacity=30); 
} 
</style> 
</head> 
<body> 
<div class="pic"> </div> 
</body> 
</html>

Answer 1

您可以使用javascript onmouseover和onmouseout个活动。

    function onHover()
{
    $("#menuImg2").attr('src', 'imageURL_OnMouseOver');
}

function offHover()
{
    $("#menuImg2").attr('src', 'imageURL_OnMouseOut');
}


<img id='menuImg' src="defaultImageURL" alt="logo" width="300px" height="150px"  

onmouseover="onHover();" onmouseout="offHover();" />

您可以查看我的小提琴演示here！

Answer 2

因为你使用了“pic”类。这将为该类的所有按钮提供相同的行为。尝试使用id

Div id =“pic”

的CSS

pic {your css}

每张图片的不同ID

如果您的代码中包含按钮，则会有所帮助

在照片未显示在anwser之前的标签

Answer 3

另一种选择是使用jquery替换悬停时的背景图像。您可以通过将hovered元素的背景图像插入var并将其添加到所有其他具有内联样式的目标元素，鼠标离开后删除样式attr来实现。

HTML：

<div class="pic shield"></div>
<div class="pic sword"></div>
<div class="pic horse"></div>
<div class="pic castle"></div>

CSS：

.pic 
{ 
    width:50%; 
    height:250px;
    opacity: 1; 
    filter: alpha(opacity=100);
    background-repeat: no-repeat;
    background-position: center;
} 

.pic:hover 
{ 
    opacity: 0.3; 
    filter: alpha(opacity=30); 
} 

.shield
{
    background-image: url(http://cdn.flaticon.com/png/256/64272.png); 
}

.sword
{
    background-image: url(http://cdn.flaticon.com/png/256/31702.png); 
}

.horse
{
    background-image: url(http://cdn.flaticon.com/png/256/32403.png); 
}

.castle
{
    background-image: url(http://cdn.flaticon.com/png/256/1010.png); 
}

Jquery的：

$(document).ready(function(){  
    $('.pic').hover(function(){
        var ThisImage = $(this).css('background');
        $('.pic').css('background', ThisImage);
    },function(){
        $('.pic').removeAttr('style');
    });
});

直播示例：http://jsfiddle.net/qo4Lnemq/2/

我对一个按钮的操作发生在另一个按钮上

3 个答案:

pic {your css}