图像悬停功能（css）找不到图像答案

【问题标题】：Image hover function (css) doesn't find image图像悬停功能（css）找不到图像
【发布时间】：2014-04-10 16:25:24
【问题描述】：

我想要一个带有图片和链接的按钮。这是我的样式代码：

<style>
    twitter{

    display:block;
    background-image: url('CIMA/Social/Twitter.png');
    width: 30%;
    height: 30%;
}
</style>

还有我的正文代码：

<twitter href="#"> &nbsp; </twitter>

但它没有显示任何图像。我尝试了很多不同的图像路径，但它就是不会显示...

【问题讨论】：

【解决方案1】：

哦。为什么不

<a href="#"><img src= "cima/social/twitter.png" /> </a>
<style>
a img {width:30%;height:30%;}
</style>

【讨论】：

这行得通，但我需要上面的这种类型的代码，因为我想制作一个“悬停”效果......
好吧，你应该首先创建你的元素“twitter”w3schools.com/jsref/met_document_createelement.asp。但我不明白为什么你不能对我的建议应用悬停效果！
那么我如何用你的方法实现悬停效果？我只找到“我的”方法的教程......

【解决方案2】：

您的 HTML 无效，因为您使用的是自定义（无效）元素。试试

HTML

<a class="twitter" href="#"> &nbsp; </a>

CSS

.twitter{

    display:block;
    background-image: url('CIMA/Social/Twitter.png');
    width: 30px; /* or whatever value */
    height: 30px;
}

【讨论】：