CSS: hover选择器控制子元素的出现和隐藏

简介: CSS: hover选择器控制子元素的出现和隐藏

前两天不知道是哪位同学问的问题,鼠标滑过一个div的时候,怎么控制子集元素属性的出现和隐藏,然后我说用用mouseover和mouseout这两个鼠标事件就行,那如果js不怎么熟悉的时候,可以用CSS: hover方法来写吧。


方法:

使用a 控制其他块的样式:
使用a控制a的子元素 b:
       .a:hover .b {
                background-color:blue;
            }

效果是这个样子的:

demo是昨天的基础上写的:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
                   .alarm:hover .divright {
             display: block;
            }
            .alarm {
                position: relative;
                width: 60px;
                height: 60px;
                margin: 60px;
            }
            .alarm img {
                width: 60px;
                height: 60px;
            }
            .divright {
                position: absolute;
                color: white;
                font-size: 17px;
                background-color: red;
                width: 23px;
                height: 25px;
                line-height: 25px;
                left: 80%;
                top: -12px;
                text-align: center;
                -webkit-border-radius: 24px;
                border-radius: 24px;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="alarm">
            <img src="img/1.png" />
            <div class="divright">
                3
            </div>
        </div>
    </body>
</html>
相关文章
|
2月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
38 1
|
2月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
46 1
|
17天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
28 2
|
1月前
|
前端开发
CSS3:hover&demo
本文介绍了CSS中`hover`伪类的基本用法,包括改变元素自身样式、影响子元素及相邻或后续兄弟元素样式的技巧。同时,还探讨了`:before`和`:after`伪元素的使用方法,以及如何通过CSS实现边框流动效果、创建登录页面、设计轮盘游戏界面和平滑处理文本溢出等实用案例。每个示例都配有代码块,便于理解和实践。
|
1月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
60 1
|
2月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
82 1
|
1月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
18 0
|
2月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
3月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
32 1

热门文章

最新文章