对于很多人来说这可能很容易,但我不能这样做,因为我不是开发人员。我试图将图像悬停在另一个上面。它有效,但当我悬停时,我仍然可以在背景中看到另一个图像。当我将两张图像(相同尺寸)叠加在一起并呈现不同的颜色时。
这是CSS代码:
.votebutton {
text-align:center;
background: transparent;
width: 24px;
height: 25px;
overflow: hidden;
float: right;
margin: -21px -28px 0px 0px;
}
.votebutton a: {
}
.votebutton a:hover {
background-image: url(../img/thumbs.png);
position:relative;
display: inline;
z-index: 2;
top: 2;
height: 5px;
width: 10px;
}
HTML
<div id="vote" class="votebutton">{if $anonymous_vote eq "false" and $user_logged_in eq ""}
<a data-toggle="modal" href="#LoginModal" class="btn btn-mini {if $link_shakebox_currentuser_votes eq 1}btn-success{/if}">
{else} {if $ link_shakebox_currentuser_votes eq 0}
这里 - @Pinocchio - &gt; 如果来自'stackoverflow社区'的人可以帮助我,我将非常感激。感谢。
编辑:已更新完整代码。感谢。
答案 0 :(得分:0)
我不完全确定你想要实现的目标。如果它只是一个悬停影响链接,那么使用:hover应该在你尝试时工作。
这是一个基本的背景悬停变化的小提琴 - http://jsfiddle.net/f6Frt/1
您只需为链接设置背景图像,然后在悬停时更改它。
.votebutton a {
padding: 20px;
background-image: url('http://twimgs.com/informationweek/galleries/automated/818/Slide-1-opening-image-38launch_full.jpg');
background-size: 100%;
}
.votebutton a:hover {
color:rgba(0,0,0,0);
background-image: url('http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2004/01/reull_vallis_-_hrsc_image_15_january_20042/9758050-3-eng-GB/Reull_Vallis_-_HRSC_image_15_January_2004_node_full_image.jpg');
background-size: 100%;
}
如果您只想在悬停时显示背景图片,请忽略css中的背景,如下所示http://jsfiddle.net/f6Frt/2
如果要使链接文本不可见,则可以将其颜色设置为透明:
.votebutton a:hover{color:rgba(0,0,0,0);}
此处显示 - http://jsfiddle.net/f6Frt/3/
如果你想更进一步,可以使用jQuery清除悬停时的html内容,如下所示 - http://jsfiddle.net/f6Frt/4/ - 这需要一些额外的调整,但如果你是一个好的开始jQuery的新手。
希望这有帮助。