Hovereffect重疊標誌

enter image description here Hovereffect重疊標誌

編輯的一部分，改變了文本更好地反映問題。

對於你在這裏看到的網站現場演示：http://wow-klickers.de/（這裏的CSS我已經修改，對可能解決這個問題。）

所以，我有以下情形。我的網站包含一個導航欄，在上圖中包含一個「論壇」按鈕，上面有一個標誌。如果我瀏覽按鈕，懸停效果會隱藏延伸到按鈕中的徽標部分。我想將鼠標懸停在按鈕上，但不會隱藏徽標的部分。

這裏是我的代碼片段：

<h1 id="logo"> // the blue box of the 2. picture 
    <a href="/"></a> // the blue box of the 1. picture 
</h1>

CSS事情：

#logo a { 
    width: 275px; 
    height: 126px; 
    display: block; 
    position: relative; 
    bottom: 18px; // added here 
} 

h1#logo { 
    margin: 0; 
    position: relative; 
    left: 85px; 
    top: 6px; 
    background: url("images/logo.png") no-repeat; 
    width: 275px; 
    display: block; 
    z-index: 2; // changed here 
    height: 126px; // added here 
} 

#primary-menu-bar li a, #primary-menu-bar ul.menu li a { 
    display: block; 
    white-space: nowrap; 
    height: 37px; 
    line-height: 29px; 
    position: relative; 
    z-index: 1; 
}

編輯我試圖填充或保證金，但保證金我的標誌被切斷，但標識應覆蓋在按鈕上方。並且填充不起作用。

來源

2013-07-08 pfu

共享導航標記，以及這些元素的CSS。或者你可以把jsfiddle中的整個標誌+導航區域？我認爲你的z-index規則需要改變。您將徽標（z-index 2）放置在導航頂部（z-index 1）。我需要使用您的標記進行測試 – chrisvillanueva

我更好地分享網站..這很容易 – pfu

實時網站適合我（使用Chrome） – Dave

將z-index:10加到h1#logo，而不僅僅是在a標籤裏面。

來源

2013-07-08 14:33:21

這將無法正常工作，因爲該標誌將遮蔽錨點的點擊區域，除非他想使用'pointer-events：none'，這在IE 10中不起作用並且在.. – rgthree

@Michael「我想要將鼠標懸停在按鈕上但不隱藏標誌的部分。「... –

@rgthree，好的，按鈕的頂部將鏈接到主頁。唯一真正的解決方法是，如果他更改按鈕以包含部分徽標，徽標高度會發生變化。 –

Hovereffect重疊標誌

回答

相關問題