gpt4 book ai didi

html - 想显示悬停样式

转载 作者:太空宇宙 更新时间:2023-11-04 14:27:59 25 4
gpt4 key购买 nike

我想显示悬停样式,但在输出中没有显示任何内容

这是我的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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com