使用CSS在鼠标上改变图像不起作用

使用CSS时，我想要一个图像/链接随着鼠标移动而改变。我不明白为什么下面的代码不起作用。 @user.twitter确实有价值。由于链接没有文字，只有一张图片，所以我不确定将第一个值放在括号内是什么。就目前而言，屏幕上没有任何图像显示。下面的代码有什么问题？使用CSS在鼠标上改变图像不起作用

HTML代码：

<%= link_to("", @user.twitter, :class => "twitter") %>

CSS：

.twitter { 
    width: 20px; 
    height: 20px; 
    background: image-url('twitter.png'); 
} 
.twitter:hover { 
    background: image-url('twitter_.png'); 
}

更新：如果我检查网页的源代码是：

<a class="twitter" href="http://www.example.com"></a>

来源

2015-06-19 Nick

的http：// jsfiddle.net/soledar10/z1u2n2e2/ – Dmitriy

你检查了生成的锚元素吗？它可能与使用'@ user.twitter'作为url有关。你说它有价值，但是有什么样的价值。 – limekin

'@ user.twitter'有一个字符串作为值，但是考虑到更新添加到OP，我认为这是正常工作。 – Nick

很难确保没有一个演示与实际的HTML & CSS但你的CSS是轻微的y畸形。

此外，该链接将需要inline-block或block而不是默认的display:inline

.twitter { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-image: url(http://4.bp.blogspot.com/-HkpT3JSkNWA/Txcu2eo0A-I/AAAAAAAAAlY/0eUq2M85Px8/s000/twitter.png); 
 
    background-size: cover; 
 
    display: inline-block; 
 
} 
 
.twitter:hover { 
 
    background-image: url('http://www.easychirp.com/images/share/twitter.png'); 
 
}

<a class="twitter" href="http://www.example.com"></a>

来源

2015-06-19 13:49:57

不幸的是使用'background-image'和'url'代替'image-url'没有效果。 – Nick

尝试添加'display：inline-block' –

是的，现在显示出来了。唯一的问题是只有图像的一部分出现（图像的一部分被截断），而我期望宽度和高度将图像拉伸到这些尺寸... – Nick

这里是我的CSS：

.twitter { 
    width: 20px; 
    height: 20px; 
    background-image: url('twitter.png'); 
} 
.twitter:hover { 
    background-image: url('twitter-hover.png'); 
}

来源

2015-06-19 13:50:08

不幸的是使用'url'和'background-image'代替'image-url'没有效果。 – Nick

检查图片url（路径）和图片大小。 –

路径/图像正确;如果我只是使用'image_tage'显示图像，它会正确显示。 – Nick

.twitter { 
    width: 20px; 
    height: 20px; 
    background: url('twitter.png') no-repeat; 
} 
.twitter:hover { 
    background: url('twitter_.png') no-repeat; 
}

来源

2015-06-19 13:50:35 vel

不幸的是使用'url'和'no-repeat'而不是'image-url'没有效果。 – Nick

set background-size：25px 25px; – vel

图像仍然不显示， – Nick

使用CSS在鼠标上改变图像不起作用

回答

相关问题