Detailed explanation of the use of hover selector in CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Detailed explanation of the use of hover selector in CSS

小云云

Dec 05, 2017 pm 01:20 PM

hoverSelector

Sometimes you need to use the two mouse events mouseover and mouseout, but writing js is more troublesome, and you have to add listening events, so things that can be solved with css should be solved with css as much as possible, which can improve performance. Let me talk about it below. Understanding of :hover:

When we were learning computer applications, the teacher taught us to use the :hover selector to complete the drop-down menu. Before, I only knew how to use it, but I didn’t know why it was used in this way. Now write down how to use it

Definition and usage

Definition:

:hover selector is used to select the element on which the mouse pointer is floating.

:hover selector applies to all elements

Usage 1:

This means: when the mouse is hovering over the style a, the background color of a is set For yellow

a:hover
    { 
        background-color:yellow;
    }

This is the most common usage, it just changes the style through a

Usage 2:

Use a to control the style of other blocks:

Use a to control the sub-element b of a:

    .a:hover .b {
            background-color:blue;
        }

Use a to control a's sibling element c (sibling element):

    .a:hover + .c {
            color:red;
        }

Use a controls the nearest element d of a:

    .a:hover ~ .d {
            color:pink;
        }

##To summarize:

1. Add nothing in the middle to control child elements;

2. '+' controls sibling elements (sibling elements);
3. '～' controls nearby elements;

Example

Use a button to control the movement state of a box. When the mouse moves over the button, the box stops moving. When the mouse moves away, the box continues to move.

body code:

    <body>
        <p class="btn stop">stop</p>
        <p class="animation"></p>
    </body>

css style:

    <style>
        .animation {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            animation: move 2s infinite alternate;
            -webkit-animation: move 2s infinite alternate;
        }
        @keyframes move {
            0% {
                transform: translate(-100px, 0);
            }
            100% {
                transform: translate(100px, 0);
            }
        }
        .btn {
            padding: 20px 50px;
            background-color: pink;
            color: white;
            display: inline-block;
        }
        .stop:hover ~ .animation {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
        }
    </style>

implementation Effect:

Related recommendations:

How to use the color animation of hover animation in Css3

Examples of using hover pseudo-classes in CSS

Sample code of how CSS implements hover dynamic effects

The above is the detailed content of Detailed explanation of the use of hover selector in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS小技巧：利用transition保留hover状态Sep 27, 2022 pm 02:01 PM

如何保留 hover 的状态？下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法，希望对大家有所帮助！

css中id选择符的标识是什么Sep 22, 2022 pm 03:57 PM

在css中，id选择符的标识是“#”，可以为标有特定id属性值的HTML元素指定特定的样式，语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是唯一不可重复的；ID属性值不要以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。

体验即飞携手哈浮X1相机的飞行之旅Jan 15, 2024 pm 02:21 PM

我们经常能够在网上看到很多精彩的俯视视角的视频，无人机拍出来的画面确实相当震撼，但其实很多人对无人机的认知很有限，例如有些地方限飞为什么还能飞？其实即开即飞的“无人机”才是当前的主流，更值得大多数人选择，今天就给大家带来哈浮飞行相机X1的上手体验。外观方面，哈浮飞行相机X1，首创折叠设计，整机仅125g，比手机轻，折叠后可以轻松手握，放进包包毫无压力。四个软性染叶和安全边框设计，完美保护拍摄安全。染叶创新采用Biobased生物基材，高弹耐用，安全环保;更有全保护边框加持，起飞降落都能贴心保护手

怎么移除css的hover事件Feb 01, 2023 am 10:06 AM

移除css hover事件的方法：1、；通过“$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })”方法绑定hover事件；2、通过“$('a').off('mouseenter').unbind('mouseleave');”方法取消绑定的hover事件即可。

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式，具体代码示例如下：HTML代码：<divid="container"><divclass="item">第一个子元素</div><divclass="item"&

css伪选择器学习之伪类选择器解析Aug 03, 2022 am 11:26 AM

在之前的文章《css伪选择器学习之伪元素选择器解析》中，我们学习了伪元素选择器，而今天我们详细了解一下伪类选择器，希望对大家有所帮助！

javascript选择器失效怎么办Feb 10, 2023 am 10:15 AM

javascript选择器失效是因为代码不规范导致的，其解决办法：1、把引入的JS代码去掉，ID选择器方法即可有效；2、在引入“jquery.js”之前引入指定JS代码即可。

从入门到精通：掌握is与where选择器的使用技巧Sep 08, 2023 am 09:15 AM

从入门到精通：掌握is与where选择器的使用技巧引言：在进行数据处理和分析的过程中，选择器（selector）是一项非常重要的工具。通过选择器，我们可以按照特定的条件从数据集中提取所需的数据。本文将介绍is和where选择器的使用技巧，帮助读者快速掌握这两个选择器的强大功能。一、is选择器的使用is选择器是一种基本的选择器，它允许我们根据给定条件对数据集进

See all articles