CSS-hover

1. padding:0 10px; 表示上下边距是0，左右边距是10.

2. padding:0 10px 0 10px；上-右-下-左。（顺时针方向）

3. .pg-header .menu:hover；表示只要鼠标移动到当前标签上时，就会应用这个下面所定义的样式。

4. 模拟抽屉网的首页：

http://dig.chouti.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
        position:fixed;
        right:0;
        left:0;
        top:0;
        height:48px;
        background-color:#2459a2;
        line-height:48px;
        }
        .pg-body{
        margin-top:50px;
        }
        .w{
        width:980px;
        margin:0 auto;
        }
        .pg-header .menu{
        display:inline-blck;
        padding:0 10px;
        color:white;
        }
        .pg-header .menu:hover{
        background-color:blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">段子</a>
            <a class="menu">新鲜事</a>
            <a class="menu">热点</a>
        </div>

    </div>
    <div class="pg-body">
        <div class="w">asdf</div>
    </div>
</body>
</html>

运行结果：

抽屉网：

时间： 2024-08-05 20:40:19

CSS-hover的相关文章

css hover对其包含的元素进行样式设置

<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li> </ul> 对a链接包含的span图标进行样式更改. .icon-down-sing

今天看到了一个比较有趣的css hover效果的开源就试做了一下演示:http://gudh.github.io/ihover/dist/index.html Github Repo在这里:https://github.com/gudh/ihover 文章地址:http://www.html-js.com/topic/274 这是我仿造的他的第一个效果做的,感觉还可以: Start Go! 你即将进入Alfred的个人博客以下是源码比较简单(至少比自己去分析开源上的源码要简单)就不一一解析了

css:hover选择器

:hover 选择器用于选择鼠标指针浮动上面的元素. :hover选择器可以用于所有的元素,不单是链接. 提示::link选择器设置指向未被访问页面的链接的样式,:visited选择器用于设置指向已被访问的页面的链接,:active选择器用于活动链接. 注释:在CSS定义中,:hover必须位于:link和:visited之后(如果)存在的话,这样的样式才能生效.

css hover对其包括的元素进行样式设置

<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li> </ul> 对a链接包括的span图标进行样式更改. .icon-down-sing

css hover遮罩层

马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的. 最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的. 项目用的是react,最开始使用的是mounseenter和mounseleave事件, 结果吧出现了点击进入另外一个路由后,再次点击回来后, 鼠标在元素上, 确没有再出现浮层. 这就有尴尬了. 当时还想用的是事件, 但想想现在css3鼠标事件, 动画, 伪类选择器这么成熟了. 额外去搜

利用CSS hover伪类改变其他元素的总结

:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮改变样式: HTML <div id="yanshi"> 演示 </div> CSS #yanshi{ width: 100px; height: 100px; transition: background-color 0.5s,color 0.5s; text-a

IE下 CSS hover iframe失效

预期:某个div下存在iframe子元素,当鼠标移动到该div下,该iframe出现,移出则iframe消失,移入iframe不会引起iframe消失. 问题:在火狐下结果满足预期,在IE下,鼠标移入iframe中会导致iframe消失,判断IE处理hover无法很好地考虑iframe的情况. 解决:使用原生js(onmouseover.onmouseout)或jQuery(hover)绑定鼠标移入移出事件问题得以解决. 参考:http://snailz.lofter.com/post/20a8

菜单的制作纯css :hover事件

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>选项卡的制作</title> <script src="../js/try.js"></script> <style> /*整体设置*/ *{ margin:0; padding:0; } #menu

css hover图片hover效果兼容ie8

例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } .icon-img{ display: block; margin-top: 5px; w

css hover dropdown

html-------------------------- <div class="dropdown"> <span>鼠标移动到我这!</span> <div class="dropdown-content"> <p>home</p> <p>home1</p> </div> </div> css--------------------------