我想显示悬停样式，但在输出中没有显示任何内容
这是我的html页面
<html>
<head>
<style rel="spreadsheet" type="text/css" src="hover_check.css">
<title>hover effect</title>
<head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>
</body>
</html>
我的css文件如下
.hover .image {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.hover a.info {
position:relative;
top:-10px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.hover:hover .image {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.hover:hover a.image {
opacity:1;
transition-delay: 0.3s;
}
img {
height:60px;
width:60px;
}
如果我从 html 页面中删除我的 css 链接，那么我的图像是可见的。
最佳答案
导致问题的东西=> <style rel="spreadsheet" type="text/css" src="hover_check.css">
将此行重写为:<link rel="stylesheet" type="text/css" src="hover_check.css" /> ，样式将开始工作。同时关闭 <head>正确标记。
最终代码应该是这样的:
<html>
<head>
<link rel="stylesheet" type="text/css" src="hover_check.css" />
<title>hover effect</title>
</head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>
</body>
</html>
干杯!
关于html - 想显示悬停样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19396630/