1
我試圖在我的鏈接上保留懸停樣式狀態,當我點擊它們時,有點像標籤效果。它似乎沒有工作,希望有人能幫助我。OnClick樣式更改
CSS:
.nav {
position: absolute;
z-index: 1000;
font-family: Asap;
right: 100px;
top: 70px;
}
.nav a, .nav a:active, .nav a:visited {
font-family: 'Asap', sans-serif;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: black 0.1em 0.1em 0.2em;
}
.nav a:hover {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
.nav2 a {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
腳本:
$('div.nav > a').click(function(){
$(this).parent().removeClass('nav').addClass('nav2');
});
HTML:
<div class="nav" onclick="javascript:showlayer('myName')">
<span class="btn1"><a href="#page-1" title="Design">Design</a> </span>
<span class="btn2"><a href="#page-2" title="Neighbourhood">Neighbourhood</a>
</span>
<span class="btn3"><a href="#page-3" title="Media">Media</a> </span>
<span class="btn4"><a href="#page-4" title="Media">Developer</a> </span>
<span class="btn5"><a href="#page-5" title="Media">Contact</a> </span>
<br><br><br><br><br><br><br><br><br><br>
</div>
叫我瘋了,但是你的'.nav a:hover'css和'.nav2 a'css看起來完全相同 – Katstevens
是的,我實際上試圖讓我的鏈接與它在懸停時具有相同的效果。 –
我這麼認爲 - 我只是將它們合併成相同的規則,儘管如此,至少如果你改變它,它將適用於兩者(只是逗號分開兩個選擇器在{之前)。什麼瀏覽器在做不同的風格? Chrome似乎仍然採用相同的風格:懸停和點擊 – Katstevens