如何重置（撤消）a：懸停屬性

在下面的HTML中，有三個<style>塊。第二塊是不需要的，這使得圖像在鼠標懸停時消失。前兩個塊是不可編輯的。我們必須使用第三個塊來抵消第二個塊的影響。給出下面第三塊的示例，但這不起作用。如何重置（撤消）a：懸停屬性

<!DOCTYPE html> 
<html> 
<head> 


<style> 
a { 
    display: inline-block; width: 280px; height: 32px; 
    background-image: url('http://www.w3schools.com/images/w3logotest2.png'); 
} 
</style> 



<style> 
/* some bad guy did this */ 
a:hover { 
    background-image: none; 
} 
</style> 



<style> 
/* to revert what the bad guy did */ 
/* but this is NOT work! */ 
a:hover { 
    background-image: inherit !important; 
} 
</style> 



</head> 

<body> 
<a href="http://www.w3schools.com/"></a> 
</body> 

</html>

非常感謝您的意見。

請注意，（對不起，我沒有說清楚），這只是一個例子。在真實情況下，有許多<a>與第一個塊設置爲不同的圖像。只有一個第二塊將它們全部毀壞。由於有很多（實際上是無限的，因爲它是一個動態頁面），所以不可能一個接一個地處理它們。我希望只有三分之一的區域可以恢復邪惡的第二個區塊的效果。非常感謝。

來源

2013-11-28 midnite

訣竅是優先的樣式屬性。你應該已經知道，有三種類型的CSS樣式的。（1）內聯（2）在標題部分（3）外部CSS文件中。優先級與我列出的一樣。所以如果你在In Header部分添加了一些東西，它會覆蓋CSS文件中的定義。內聯樣式將覆蓋其他所有內容。 –

寫：

<style> 
    a:hover { 
     background-image: url('http://www.w3schools.com/images/w3logotest2.png'); 
    } 
</style>

來源

2013-11-28 08:48:51 Hiral

哦，是的，謝謝你的幫助！但是有很多不同的。將它們全部列出是不可能的。然而，第二塊可以毀掉所有只出現一次 – midnite

這是一個錯字：你有你的風格一個額外}，刪除此。

a { 
    display: inline-block; width: 280px; height: 32px; 
    background-image: url('http://www.w3schools.com/images/w3logotest2.png'); } 
}

它應該是這樣的：

a { 
    display: inline-block; width: 280px; height: 32px; 
    background-image: url('http://www.w3schools.com/images/w3logotest2.png'); 
}

而且還提供背景圖片的URL，因爲繼承只是繼承了它以前沒有定義父。

來源

2013-11-28 08:50:39

哦，是的！謝謝。但問題仍然沒有解決。 – midnite

查看更新...... –

我想我現在明白你的意思了。

每個錨都有不同的背景圖像。

有些人去設置懸停的網址沒有。（你顯然沒有訪問標記）

現在你想在懸停時返回該網址。

嗯，很抱歉，但據我所知，你不能在CSS中這樣做。

CSS在此上下文中沒有「撤消」。

請參閱this SO answer。

如果這是錨元素的唯一塊，您可以使用nth-child來定位第二個元素。

a:nth-child(2):hover { 
     background-image: url('http://www.w3schools.com/images/w3logotest2.png'); } 
    }

FIDDLE

有問題的錨元素必須有HREF的值，所以你可以瞄準的是通過屬性選擇

a[href="http://your-website"]:hover { 
    background-image: url('http://www.w3schools.com/images/w3logotest2.png'); } 
}

FIDDLE

如果您將鼠標懸停在上面的提琴的第二個元素上，您會看到懸停在它上面並不會消失。

來源

2013-11-28 09:02:13 Danield

感謝和非常好的插圖。但目標網址不適用於我的情況。請參閱問題中的編輯部分。謝謝！ – midnite

那個錨有一個類或id屬性嗎？或者，它的父元素是否有類或ID？ – Danield

是的，主播有班級。但是每個錨都有不同的類別。所以在第一塊中，它們被設置爲不同的圖像。而且，他們的父元素也有一個類。我希望重置所有（umlimited）主播，而不僅僅是第二個主播。 – midnite

試試這個：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 

<style> 
a { 
    display: inline-block; width: 280px; height: 32px; 
    background-image: url('http://www.w3schools.com/images/w3logotest2.png'); 
} 
</style> 



<style> 
/* some bad guy did this */ 
a:hover { 
    background-image: none; 
} 
</style> 



<style> 
/* to revert what the bad guy did */ 
/* but this is NOT work! */ 
.toggle-a:hover { 
    background-image: inherit !important; 
} 
.toggle-a a{ 
    float: left !important; 
} 
.bg-hover{ 
    background-image: inherit !important; 
} 
</style> 



</head> 

<body> 
<div class="toggle-a"> 
<a class="overwrite" href="http://www.w3schools.com/"></a> 
<div> 
<script> 
$(function(){ 
    $('.overwrite').mouseover(function(){ 
    $(this).addClass('bg-hover'); 
    }).mouseout(function(){ 
    $(this).removeClass('bg-hover'); 
    }); 
}); 
</script> 
</body>

來源

2013-11-28 09:11:43 HICURIN

仍然消失... – midnite

不好意思！你知道第二塊在哪裏嗎？ – HICURIN

我還沒找到它... – midnite

如何重置（撤消）a：懸停屬性

回答

相關問題