0

这对很多人来说可能真的很容易，但我不能这样做，因为我不是开发人员。我正在尝试将图像悬停在另一个图像之上。它可以工作，但是当我悬停时，我仍然可以在背景中看到另一张图像。当我将两个图像（相同大小）悬停时，它们相互重叠并给出不同的颜色。

这是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 --> 如果“stackoverflow 社区”的人能帮助我，我将不胜感激。谢谢。

编辑：已更新完整代码。谢谢。

4

1 回答 1

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 新手。

希望这可以帮助。

于 2013-08-26T03:01:16.903 回答