0

我想显示悬停样式，但在输出中没有显示

这是我的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 链接，那么我的图像是可见的。

4

3 回答 3

1

导致问题的东西=><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>

干杯!

于 2013-10-16T06:48:15.973 回答
0

尝试关闭<head>标签，你已经打开了两次；）

另外，我认为链接样式表的正确标记是：<link rel="stylesheet"....不是<style rel="...

W3C 验证器

这是一个有用的工具来验证您的 html，一些错误通常来自不正确的标记。此工具会提醒您错误。

于 2013-10-16T06:40:10.300 回答
0

添加带有链接标签而不是样式标签的头标签。请检查代码。

  <head>
    <link rel="stylesheet" type="text/css" href="../StyleSheet.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>

在此处输入图像描述

于 2013-10-16T06:46:49.043 回答