当鼠标没有激活一个类时，添加它？ 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的

回答

相关问题