鼠标悬停相关操作

Posted 2020-10-06 姜小七的填坑之旅

css相关操作：

常用场景：

1. 给盒子加阴影

.operater-item:hover {
  box-shadow: 0 3px 7px 0 rgba(174, 174, 174, 0.5);
}

2. 悬停显示文字

<div title="悬停显示的说明文字">悬停显示文字</div>

3. 悬停显示隐藏的子元素盒子

    即hover同样可以对子元素进行样式操作

<div class="operater-item">

    <div class="operater-icon">隐藏的子标签</div>

    鼠标悬停在此部分会显示隐藏的子标签内容

</div>

.operater-icon {
display: none;
}

.operater-item:hover .operater-icon {
display: block;
}

js鼠标悬停事件处理方式：

1.光标悬停是mouseover事件，光标离开是mouseout事件，

  在html代码中就是设置onmouseover和onmouseout属性。例如下：

 

//假设a的样式已经明确
<span id=‘a‘ onmouseover="fc1(this)"
 onmouseout="fc2(this)"></span>

    

function fc1(node){
        node.style.width = ‘200px‘;
    }
    function fc2(node){
        node.style.width = ‘100px‘;
    }

 

暂时先总结这么多，路漫漫长矣~