Question

我有这种复杂的设置与div和链接。无论如何，我的页面左侧顶部的徽标应该在您将鼠标悬停在它上面时发生变化。但是，如果您的鼠标位于页面顶部的任何位置（图像上以红色标出），它也会发生变化

此外，当我点击徽标时，链接不起作用。我认为这可能与我设置div的方式有关，但我不确定。

我对这一切仍然有点新意，而且在弄清楚这个问题时我有点不知所措。如果你能提供帮助，我将不胜感激。

下面是我的html，css和图片，以帮助向您展示我正在谈论的内容。

enter image description here

这是我的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="topheader"> 

<a href="index.html">
<div id="logo">
<div id="navigation">
<a href="index.html">NEWS</a><br />
<a href="index.html">ABOUT</a><br />
<a href="index.html">VOLUNTEER</a><br />
<a href="index.html">DONATE</a><br />
<a href="index.html">CONTACT US</a>
</div>
</div>
</a>
</div>


<div id="welcome">
<h1>Welcome</h1>
<h2>
To 
<span class="gold"> Promise Land Partners</span></h2>

</div>


<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | <a href="index.html">NEWSLETTER</a> | <a href="index.html">FACEBOOK</a>
<span class="right">DESIGN: HANGING OUT</span>
</p>
</div>

</div>
</body>
</html>

这是我的CSS

@charset "utf-8";
/* CSS Document */

body {
    background-image: url(img/dot.png), url(img/background.jpg);
    background-repeat: repeat, no-repeat;
    background-position: top left, center center fixed;
    background-size: auto, cover;;
    margin: 0px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#topheader {
    height: 135px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-image: url(img/headerbar.png);
    background-repeat: repeat-x;
}

#logo {
    background-image:url(img/PLP.png);
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
}

#logo:hover, #logo:active {
    background-image:url(img/PLP_pushed.png);
}

#navigation {
    background-image: none;
    background-position: top left;
    padding-left: 180px;
}

#bottom_bar {
    background-image:url(img/bottom_bar.jpg);
    position: fixed;
    bottom: 0;
    height: 27px;
    width: 100%;
    color: white;
}

#bottom_bar p {
    text-align: left;
    padding: 4px;
    margin: 0;
}

.right {
    float:right;
}

#welcome {
    background-image: url(img/welcomepanel.png);
    background-repeat: no-repeat;
    position: relative;
    left: 0;
    top: 70px;
    height: 261px;
    width: 100%;
    padding-top: 10px;
    padding_left: 10px;
    margin: 0;
}

h1 {
    color:white;
    padding-left: 90px;
    font-size: 6em;
    margin: 0;
    margin-top: 8px;
}

h2 {
    color: white;
    font-size: 4em;
    padding-left: 20px;
    margin: 0;
    line-height: .65em;
}

.gold {
    color: #ee9f00;
    font-size: .75em;
    margin: 0;
}

a {
    text-decoration: none;
    color: white;
}

a:visited {
    color: #c88601;
}

a:focus {
    color: #ee9f00;
}

a:hover {
    color: #ee9f00;
}

a:active {
    color: c88601;
}

#navigation a {
    text-decoration: none;
    color: white;
}

#navigation a:visited {
    color: white;
}

#navigation a:focus {
    background-color: #ee9f00;
}

#navigation a:hover {
    background-color: #ee9f00;
}

#navigation a:active {
    background-color: #ee9f00;
}

Answer 1

当您将鼠标悬停在#logo上并且#logo设置为width: 100%;时，您设置了CSS设置以更改图片尝试更改#logo的宽度，或者，如果中断您的风格，将孩子div添加到#logo，您可以在其中更改背景图片。

请参阅此小提琴以获取示例：http://jsfiddle.net/QDgVy/

HTML

<a href="index.html">
    <div id="logo_container">
    <div id="logo"></div>
        <div id="navigation">
            <a href="index.html">NEWS</a><br />
            <a href="index.html">ABOUT</a><br />
            <a href="index.html">VOLUNTEER</a><br />
            <a href="index.html">DONATE</a><br />
            <a href="index.html">CONTACT US</a>
        </div>
    </div>
</a>

CSS

#logo_container {
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#logo {
    background-image:url(...);
    width: 100px;
    height: 100px;
    display: block;
    float: left;
}
#logo:hover, #logo:active {
    background-image:url(... );
}

答：当它不应该时，悬停激活

1 个答案: