码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标悬停相关操作

时间:2017-09-07 20:24:20      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:play   lin   隐藏   lock   ace   this   pac   div   shadow   

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‘;
    }

 

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

 

鼠标悬停相关操作

标签:play   lin   隐藏   lock   ace   this   pac   div   shadow   

原文地址:http://www.cnblogs.com/Janejxt/p/7491395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!