當鼠標沒有激活一個類時，添加它？ JavaScript的

我有兩個邊界，一個上H1的底部，而另一個在一個div的右側。如果鼠標位於任一元素上，我會讓它們變色。我的想法是當兩個鼠標都不在時，將兩個邊框都改爲新的顏色。我認爲我最好的選擇是某種JavaScript邏輯。例如：如果鼠標不在a上，而不在b上，則添加id1和id2，但我不知道當鼠標返回到id1和id2時，這將如何影響我的id1和id2。當鼠標沒有激活一個類時，添加它？ JavaScript的

這是正確的答案，或有另一種方式我可以做到這一點？如果你想知道邊界是2px寬。我對JavaScript很陌生。所以要回顧一下，我想要的是，當鼠標懸停在鼠標上方時，我的h1和div的邊界會發生變化，鼠標不在同一時間時，我不會同時在兩個邊界上進行更改。我追求解決這個問題的最簡單最簡單的方法。

來源

2017-04-13 Patrick

是H3和DIV相鄰？ – nixkuroi

就可以套用，只有當其容器懸停CSS做。查看片段！

.container { 
 
    display:block; 
 
    width:100px; 
 
} 
 

 
.container:hover h1 { 
 
    border-right:solid 2px red; 
 
} 
 
.container:hover div { 
 
    border-top:solid 2px blue; 
 
}

<div class="container"> 
 
<h1>Hi there</h1> 
 
<div>my friend</div> 
 
</div>

來源

2017-04-13 16:31:04 nixkuroi

可以使用onmouseleave事件來處理，當鼠標不上的元素會發生什麼。

您可以爲當用戶將鼠標懸停在他們當用戶離開他們，你設置爲true和false每個元素的布爾值。然後你可以在你的onmouseleave事件處理程序中有一個if語句來檢查鼠標是否在任何一個元素上。

//Get your h1 element 
//Get your div element 
var onH1 = false; 
var onDiv = false; 

function changeBoth() { 
    //Change both borders 
} 

h1.onmouseover = function() { 
    onH1 = true; 
    //Change h1 border 
} 
div.onmouseover = function() { 
    onDiv = true; 
    //Change div border 
} 
h1.onmouseleave = function() { 
    onH1 = false; 
    if((!onH1) && (!onDiv)) { 
    changeBoth(); 
    } 
} 
div.onmouseleave = function() { 
    onDiv = false; 
    if((!onH1) && (!onDiv)) { 
    changeBoth(); 
    } 
}

來源

2017-04-13 16:35:35 user886

這與我的想法非常接近，我將懸停設置在CSS中，我應該將其更改爲JavaScript以使其更好嗎？ – Patrick

您應該將現有的懸停CSS重命名爲未設置懸停的其他名稱。然後，您可以用JS來處理使用className屬性類之間的切換：https://www.w3schools.com/jsref/prop_html_classname.asp如果您需要在同一時間，以支持您的元素超過1類，你可以使用classList https://www.w3schools.com/jsref/prop_element_classlist.asp – user886

當鼠標沒有激活一個類時，添加它？ JavaScript的

回答

相關問題