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

我有这种复杂的设置与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; 
}

来源

2014-02-12 DiscipleDavid

并不奇怪，因为在#logo的宽度为100％。你需要将真实的标识分解成它自己的div – Trent

当你问一个问题时，你应该只显示你的代码的相关部分。最好的办法是尽量用最少量的代码来重现问题，去除不影响它的所有内容。这样，95％的时间你自己发现问题，而在其余的情况下，你可以发布相关的代码，而不是浪费别人的时间。我知道你是初学者，但你应该越早越好地学习这一点。 – kapa

卡帕，感谢您的提示。我这次只做了，因为上次有人说我没有发布我的CSS。他们说要发布整个事情，以便他们可以做一个jsfiddle。但我下次只会显示相关的代码。 – DiscipleDavid

你有你的CSS设置，当你将鼠标悬停在#logo和#logo设置为改变形象width: 100%;尝试更改#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(...); 
}

来源

2014-02-12 00:17:49

感谢您的帮助。你的建议帮助我解决了它。我最终将#topheader更改为我的容器，并将链接放在徽标周围，然后将其宽度缩小为图像的大小。这解决了它。谢谢。 – DiscipleDavid

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

回答

相关问题