Question

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

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

Answer 1

引起问题的事情=＆gt; <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>

干杯！

Answer 2

尝试关闭<head>标记，您已将其打开两次;）

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

W3C validator

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

Answer 3

使用链接标记添加标题标记，而不是样式标记。请检查代码。

  <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>

enter image description here

想要显示悬停风格

3 个答案: