結合懸停和焦點選擇器樣式但不是同時的

我有一個ul列出的項目，當它們懸停或集中時突出顯示。但是，如果有一個被徘徊，另一個被聚焦，那麼我只想讓懸停的li更改樣式，並將焦點元素樣式恢復爲默認。這可能嗎？這是一個demo。謝謝。結合懸停和焦點選擇器樣式但不是同時的

CSS

li:hover,li:focus{ 
    background-color:yellow; 
    cursor:pointer; 
}

HTML

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul>

$('li').attr('tabindex','0').focus();

來源

2015-02-06 user2014429

既然你已經標記的JavaScript和jQuery，我想你是不是在找一個純CSS的解決方案。這是一個有效的假設嗎？ – Harry 2015-02-06 16:00:31

刪除li：關注CSS？ – 2015-02-06 16:01:04

@Harry不一定是純粹的CSS，但如果可能的話，那很好。 – user2014429 2015-02-06 16:02:59

使用你的代碼，這樣做...

li:focus{ 
    background-color:yellow; 
    cursor:pointer; 
    outline: none; 
} 

ul:hover > li:focus { 
    background: none; 
    cursor: default; 
} 

ul:hover > li:hover { 
    background: yellow; 
    cursor: pointer; 
}

什麼是CSS的意思嗎？

設置具有以下特徵的任何列表項：焦點具有黃色背景。
當您將鼠標懸停在父UL上時，將所有li設置爲無背景。
將鼠標懸停在單個LI上時，將背景設置爲黃色。
當您懸停在UL上時，樣式重置。

JS Fiddle

來源

2015-02-06 16:09:04 erier

輝煌的CSS解決方案。正是我在找什麼。謝謝。 – user2014429 2015-02-06 16:11:22

解釋它在做什麼使答案更好。乾杯:) – Harry 2015-02-06 16:23:30

與jQuery你可以使用blur() event：

$('li').attr('tabindex', '0').focus() 
 

 
$('li').hover(function() { 
 
    $(this).siblings('li').blur(); 
 
})

li:hover, 
 
li:focus { 
 
    background-color: yellow; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>hover over one and two and three should not be yellow anymore</p> 
 
<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>

來源

2015-02-06 16:06:41 DaniP

你可以只用專注的風格和列表項中添加鼠標懸停事件，使徘徊時，他們關注的焦點。這樣，即使您將鼠標移出列表項目，它仍將保持專注。

$('li').mouseover(function() { 
    $(this).focus(); 
});

來源

2015-02-06 16:08:27

將您：前懸停CSS類：焦點...

.textbox:hover 
{ 
    border-color: lightskyblue; 
} 

.textbox:focus 
{ 
    border-color: yellowgreen; 
}

來源

2017-10-18 15:56:35 CZachar

結合懸停和焦點選擇器樣式但不是同時的

回答

相關問題