如何判断一个div是否在激活状态（鼠标在其块中）

Question

有5个相同class的div 假如每个div中都有一个可以操作的部分【但是只有在其鼠标是在这个块中的时候才显示】这个有什么好方法吗？

Answer 1

JavaScript 来做太麻烦了，CSS 来做是最省事儿的，假设 div 的class 是 .my-div，需要鼠标移进去才显示的 div（或者其他的什么）有个 class 是 .button。

.button {
    display: none;
}
.my-div:hover .button {
    display: block;
}

Answer 2

js的onmouseover事件。

Answer 3

添加一个类名，例如.active；当鼠标悬浮或点击时添加到指定类清楚其他元素上的active上即可

Answer 4

box.on("focus",function(){
    //获得鼠标焦点时执行
})

Answer 5

如果只是要检测鼠标移到你制定div上显示东西的话，建议用css的hover伪类来做。

Answer 6

.div {
    display: none;
}
.div:hover {
    display: block;
}

Answer 7

能用css的尽量用css，尽量减少js操作dom，用:hover来显示div内的元素

div:hover a{
    // 鼠标经过div的时候，a的样式
}

Answer 8

有js和css2种方法解决两种问题：
1.鼠标移入div块改变其内部可操作部分的样式：

.div:hover .op-div{
    display:block;
}

2.鼠标移入div块在其中添加一个可操作部分：

div.onmouseover = function() {
    //相关逻辑代码
}

比较而言，css更简单，而且onmouseover会有事件冒泡的过程。如果要用事件监听的话推荐jquery的mouseenter事件，没有事件冒泡。

Answer 9

//jq
$('div').on('hover',function(){

//鼠标进入
$('div').find('需要隐藏的标签').hide()
$(this).find('需要显示的标签').show()

},function(){

//鼠标移出

})

//css
.div:hover .(子元素){display:block}

//js
div.onmousemove = function(){

//鼠标移入    //onmouseout 移出

}