Question

我有以下CSS，其中图像'vote_up'是背景图像。我想改变javascript以在翻转时交换图像。

下面的JS代码调用数据库。有没有办法用背景图像调用鼠标悬停功能？如果没有，你能提供另一种解决方案吗？

CSS

<style type='text/css'>
body {
    background: #e8e6de;
}

a {
outline:none;
}

.entry {
    width: 710px;
    background: #ffffff;
    padding:8px;
    border:1px solid #bbbbbb;
    margin:5px auto;
    -moz-border-radius:8px;
}

span.link a {
    font-size:150%;
    color: #000000;
    text-decoration:none;
}

a.vote_up, a.vote_down {
    display:inline-block;
    background-repeat:none;
    background-position:center;
    height:16px;
    width:16px;
    margin-left:4px;
    text-indent:-900%;
}

a.vote_up {
    background:url("images/thumb_up.png");
}

a.vote_down {
    background:url("images/thumb_down.png");
}
</style>

的Javascript

<script type='text/javascript'>
$(function(){
    $("a.vote_up").click(function(){

    <!-- Required click function omitted for this example-->
    }

}); 
</script>

可能会使用这样的东西吗？ CSS中没有定义图像名称属性。有没有办法把它叫出来？

<script type="text/javascript">
<!--

function roll(img_name, img_src)
{
    document[img_name].src = img_src;
}

//-->

</script>

HTML

<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>' onmouseover="roll('vote_up', 'images/thumb_up_green.png')" onmouseout="roll('vote_up', 'images/thumb_up.png')">Vote Up!</a>

Answer 1

你应该使用CSS：

a.vote_up:hover {
    background: url(...);
}

这甚至适用于IE6！

Answer 2

如果您只是想要进行翻转效果，那么我强烈建议您使用精灵和：hover伪元素。

.vote_button { background-position:left top; background-image: url('http://yoursite.com/images/your_vote_button_sprite.jpg'); width: 30px; height: 30px; }
.vote_button:hover { background-position:left bottom; }

让你的精灵并排，上下两个图像（非滚动和滚动）。每个（在这种情况下）将是30像素。一块蛋糕。

Answer 3

要在jQuery中更改元素el的背景图像，您可以执行以下操作：

el.css("background-image", "new_bg.png");

Answer 4

有two methods to alter the images。您可以使用一个图像，也可以使用两个图像。

一种图像方法：

<html>
<head>
<title>test</title>
<style>
.altericon{width:130px; display:block; height:33px; line-height:33px; overflow:hidden; background-image:url(altericon.jpg); background-repeat:no-repeat; background-position:left top;}
.altericon:hover{background-position:left -34px;}
</style>
</head>
<body>
<a href="" class="altericon"></a>
</body>
</html>

两种图像方法：

<html>
<head>
<title>test</title>
<style>
.altericon1{width:130px; display:block; height:33px; line-height:33px; overflow:hidden; background-image:url(icon1.jpg); background-repeat:no-repeat; }
.altericon2{width:130px; display:block; height:33px; line-height:33px; overflow:hidden; background-image:url(icon2.jpg); background-repeat:no-repeat; }
</style>
</head>
<body>
<a href="" class="altericon1" OnMouseOver = "this.className='altericon1'" OnMouseOut = "this.className='altericon2' "></a>
</body>
</html>

Javascript交换图像翻转

4 个答案: