我有这种带有 div 和链接的复杂设置。无论如何，当您将鼠标悬停在我页面左上角的 Logo 时，它应该会发生变化，而且确实如此。但是，如果您的鼠标移动到页面顶部的任何位置(图像上以红色标出)，它也会发生变化
此外，当我点击 Logo 时，链接不起作用。我认为这可能与我设置 div 的方式有关，但我不确定。
我对这一切还是有点陌生，而且我对解决这个问题有点不知所措。如果您能提供帮助，我将不胜感激。
下面是我的 html、css 和一张图片，以帮助向您展示我在说什么。
这是我的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;
}
最佳答案
当您将鼠标悬停在 #logo 上并且 #logo 设置为 width: 100%; 时，您的 CSS 设置为更改图像尝试更改 #logo 的宽度，或者，如果这会破坏您的样式，请将子 div 添加到 #logo 中，您可以在其中更改背景图片。
有关示例，请参阅此 fiddle :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(... );
}
关于css - :hover activates when it's not supposed to，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21716031/