我不想更改<span>懸停

上的按鈕背景請看看我的jsfiddle示例，並請幫助我如何將鼠標懸停在跨文本上時保持按鈕背景。當我將鼠標懸停在按鈕上時，按鈕會更改背景 - button_active.gif，但問題是當我將鼠標懸停在範圍上時，因爲此時按鈕的背景已更改。我不想更改<span>懸停

Fiddle

<div class="button"> 
    <a href="#" title="Opširnije..."> 
    <span>Više</span> 
     <img src="http://mile.x3.rs/mile/palma/img/button.gif" onmouseover="this.src='http://mile.x3.rs/mile/palma/img/button_active.gif'" onmouseout="this.src='http://mile.x3.rs/mile/palma/img/button.gif'"> 
    </a> 
</div>

來源

2015-10-30 Mile Mijatović

使用CSS來設置背景圖片。 JavaScript是相當複雜的做法。

然後，您的懸停效果可以與文本顏色同時更改背景圖像。

（如果需要使用JavaScript來做到這一點，調用JavaScript的標籤，而不是像上）

來源

2015-10-30 18:53:37

.button span { 
 
\t font-family: 'Georgia'; 
 
\t text-transform: uppercase; 
 
\t font-size: 13px; 
 
\t color: #FFFFFF; 
 
\t position: absolute; 
 
\t top: 20px; 
 
\t left: 40px; 
 
\t z-index: 2; 
 
    background: url('http://mile.x3.rs/mile/palma/img/button.gif') no-repeat; 
 
    padding: 14px 37px 30px 37px; 
 
} 
 
.button:hover span:hover{background: url('http://mile.x3.rs/mile/palma/img/button_active.gif') no-repeat;} 
 
.button:hover span, 
 
.button:hover:before {color: #88bfaa;}

<div class="button"> 
 
    <a href="#" title="Opširnije..."> 
 
    \t <span>Više</span> 
 
\t </a> 
 
</div>

來源

2015-10-30 18:54:29 365DaysMasti

你的跨度是在圖片上方，所以它捕獲自己的懸停事件，使圖像的懸停事件無效（一次只能懸停一個元素）。

選項1（無需重新工作的代碼）

一種解決方案是增加pointer-events: none的CSS您span。這意味着指針不會與跨度進行交互。注意：這也意味着跨度不能被點擊或選擇！

.button span { 
 
    font-family: 'Georgia'; 
 
    text-transform: uppercase; 
 
    font-size: 13px; 
 
    color: #FFFFFF; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 40px; 
 
    z-index: 2; 
 
    pointer-events: none; /* this causes the hover event for span not to trigger */ 
 
} 
 
.button:hover span, 
 
.button:hover:before { 
 
    color: #88bfaa; 
 
}

<div class="button"> 
 
    <a href="#" title="Opširnije..."> 
 
    <span>Više</span> 
 
    <img src="http://mile.x3.rs/mile/palma/img/button.gif" onmouseover="this.src='http://mile.x3.rs/mile/palma/img/button_active.gif'" onmouseout="this.src='http://mile.x3.rs/mile/palma/img/button.gif'"> 
 
    </a> 
 
</div>

選項2（清潔液）

一個更好的解決辦法是設置懸停事件對整個a標籤（因爲這是你所希望的一個無論如何點擊！），並使用CSS而不是JavaScript。在這種情況下，使用背景圖片代替img標籤也會更好。以下是一個示例實現。

.button { 
 
    display: block; 
 
    background: url('http://mile.x3.rs/mile/palma/img/button.gif'); 
 
    /* these are the dimensions of button.gif */ 
 
    width: 103px; 
 
    height: 51px; 
 
} 
 
.button span { 
 
    font-family: 'Georgia'; 
 
    text-transform: uppercase; 
 
    font-size: 13px; 
 
    color: #FFFFFF; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 40px; 
 
    z-index: 2; 
 
} 
 

 
.button:hover span { 
 
    color: #88bfaa; 
 
} 
 
.button:hover { 
 
    background: url('http://mile.x3.rs/mile/palma/img/button_active.gif'); 
 
}

<!-- the HTML is much simpler! it contains content only, no decoration --> 
 
<a href="#" title="Opširnije..." class="button"> 
 
    <span>Više</span> 
 
</a>

來源

2015-10-30 18:57:44

我不想更改<span>懸停

回答

相關問題