Question

我在img:hover

上遇到问题

这是我的jsbin：http://jsbin.com/bereputu/1/edit

我的问题是当我把鼠标放在＆＃34; home＆＃34;或者＆＃34;联系＆＃34;，我想要替换原始图像的图像看起来比我预期的要低一些。

这是我的代码：

<html>

<head>
    <title>UltraLotus</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="images/header.png">
        </div>
        <center>
        <div class="nav">
                    <a href="index.html"><img src="images/home.jpg"></a>
                    <a href="contact.html>"><img src="images/contact2.jpg"></a>
        </div>
        </center>
        <div class="page">
            <p></p>
        </div>
        <div class="footer">
        </div>
    </div>
</body>

</html>

CSS

body {
    background-image: url("images/bg.jpg");
    background-repeat: repeat-y;
    background-size: 100% 100%;
    margin:0;
    padding:0;
    height:100%;
}

.container {
    min-height: 100%;
}

.header {
    background-color:#1a1a1a;
    width:100%;
    height:100px;
}

.header img {
    position: relative;
    margin-top:-30px;
}

.nav {
    position:relative;
    width:100%;
    height:40px;
    top: -15px;
    background-image: url("images/nav.jpg");
}

.nav img {
    position:relative;
    margin-top:13px;
}

.nav a:first-child:hover {
    position:relative;
    background-image: url('images/home.jpg');
}

.nav a:nth-child(2):hover {
    position:relative;
    background-image: url('images/contact.jpg');
}
.page {
    padding-top:5px;
    top:150px;
    padding-bottom:70px;
}

.footer {
    position:absolute;
    bottom: 0;
    width:100%;
    height:70px;
    background-image: url("images/footer.jpg");
}

Answer 1

我不太确定您希望使用:hover样式完成什么，但它取代了与您使用的图像完全不同的图像你的原始导航元素。

为了便于调试，如果打开chrome开发人员工具，可以强制悬停状态，以便查看所有应用的css规则：

screenshot

您会注意到您在悬停时为a元素background-image提供了img，但其内容仍然包含.nav a { color: grey; font-size: 1.2em; text-decoration: none; border: 1px solid grey; padding: 5px; padding-bottom: 0px; border-top-left-radius: 7px; border-top-right-radius: 7px; } /* I even added in a little hover effect */ .nav a:hover { background-color: #2C2C2C; }元素。因此双重造型。

注1 ：由于它们都是相同的，所以你根本不需要悬停样式。

注意2 ：这似乎不值得向我提供图像。你应该能够用原生的html和css完成这个确切的风格。它们渲染速度更快，下载更容易，屏幕阅读器更好，内容更清晰，更清晰，更容易扩展和调整。我完全跳过了这些图片并为此输入了html / css。

这里有一个小小的CSS来启动你的工作：

{{1}}

这是您的完整网站设计，没有任何图片（徽标除外）：

http://jsbin.com/bereputu/2/

你可以变得更加复杂，但我会避免尽可能地塑造你的设计。如果你正在做网络开发，请学习CSS

为什么img：hover不起作用？

1 个答案:

http://jsbin.com/bereputu/2/