我的css代码不工作,因为我想,它不会显示图像
问题描述:
此代码无法正常工作,我将不得不要求您远离明显缺乏适当的网址和电子邮件地址。我试图让一张照片与另一张照片切换,只要我将鼠标悬停在上面。此外,我希望它是一个活跃的照片,所以当我点击它时,我会收到一封电子邮件弹出窗口。我的css代码不工作,因为我想,它不会显示图像
<!DOCTYPE html>
<div>
<br/>
</div>
<html>
<head>
<style type="text/css">
.imgBox1
{
width: 333px;
height: 416px;
background-image: url(DSC_0267-Edit.jpg) no-repeat;
}
.imgBox1:hover
{
width: 333px;
height: 416px;
background-image: url(DSC_0267-Edit-Edit%202.jpg) no-repeat;
}
</style>
</head>
<body>
<a href="mailto:[email protected]">
<div class="imgBox1">
</div>
</a>
</body>
</html>
答
更改css以使用background-image中的背景。签出背景CSS规则documentation on MDN了解更多信息。
.imgBox1 {
width: 333px;
height: 416px;
background: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat;
}
.imgBox1:hover {
width: 333px;
height: 416px;
background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37_2x.png);
}
<a href="mailto:[email protected]">
<div class="imgBox1"></div>
</a>
SOOOOO,什么不起作用? – nicovank
为什么你在'html'标签之前有'div'? – Turnip
你好,欢迎来到*。请花一些时间阅读帮助页面,尤其是名为[“我可以询问什么主题?”(http://*.com/help/on-topic)和[“我应该问什么类型的问题避免问?“](http://*.com/help/dont-ask)。更重要的是,请阅读[Stack Overflow问题清单](http://meta.stackexchange.com/q/156810/204922)。您可能还想了解[最小,完整和可验证示例](http://*.com/help/mcve)。 – secelite