答：懸停激活時，它不應該

我有這種複雜的設置與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

答：懸停激活時，它不應該

回答

相關問題