如何將css應用於光標所在的元素？

如果你能幫我解決我的問題，我將不勝感激。我試圖將css應用到一個元素，即我的鼠標結束。如何將css應用於光標所在的元素？

<header> 
    <ul> 
    <li><a href="#">ShareImage</a></li> 
    <li><a href="#">ShareCode</a></li> 
    </ul> 
</header>

這就是菜單的樣子。當你將光標放在它上面時，我想要將li元素的背景變亮。

我想是這樣的

$(function(){ 
    $('header a').hover(function(){ 
    $(this).fadeIn(2000, function(){ 
     $('header ul li').css("background-color", "#3A3A3A"); 
    }); 
    }); 
})

但它不工作，我怎麼想它的工作，我沒有使用jQuery的一段時間，現在我什麼都忘了。謝謝大家幫助我！

來源

2015-06-03 Danny

在你的CSS：

header ul li:hover { 
    background-color: #3A3A3A; 
}

無需jQuery的。

編輯：

對於評價要求的衰落效應，這是最簡單的CSS（在此實例中爲1秒衰落）：

header ul li:hover { 
    background-color: #3A3A3A; 
    transition: 1s; 
}

編輯2：

經驗豐富，定義li:hover的過渡屬性可以打破淡入/淡出效果。您需要爲沒有僞類的元素定義它。所以，我們最後的CSS代碼如下：

header ul li { 
    transition: 1s; 
} 

header ul li:hover { 
    background-color: #3A3A3A; 
}

來源

2015-06-03 18:59:14 lucasnadalutti

是的，我知道，它的解決方案，但我想讓它那種動畫的，我想要淡出效果。 – Danny

@lucas：這會影響列表項目的懸停，而不是在錨點上，但這可能是問題，也可能不是問題。 –

@Danny這在CSS3中也是可以的。我會更新答案。 – lucasnadalutti

解決方案1

使用Hover在CSS

喜歡把這個代碼在頭

<STYLE type="text/css"> 
    ul{background-color:#fff;} 
    li:hover 
    { 
     background-color:#ff0000; 
    } 
</STYLE>

解決方案2

使用jQuery功能

$('li').mouseover(function(e) 
{ 
    e.stopPropagation(); 
    $(this).addClass('hover'); 
}); 

$('li').mouseout(function() 
{ 
    $(this).removeClass('hover'); 
});

來源

2015-06-03 19:00:42

這裏是一個可能的解決方案：

$('header a').hover(function(){ 
 
    $('header ul li').css("background-color", "#FFFFFF"); 
 
    $(this).fadeIn(2000, function(){ 
 
     $(this).parent().css("background-color", "#3A3A3A"); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <ul> 
 
    <li><a href="#">ShareImage</a></li> 
 
    <li><a href="#">ShareCode</a></li> 
 
    </ul> 
 
</header>

來源

2015-06-03 19:02:51

如何將css應用於光標所在的元素？

回答

相關問題