css指针悬停_CSS中的指针事件属性

小鱼儿 2023-03-05 15:48 97阅读 0赞

css指针悬停

## CSS | 指针事件属性 **(**CSS | pointer-events Property**)** ##

**Pointers** are the mouse cursors on the web page that are used to navigate and click an option.

**指针**是网页上的鼠标光标，用于导航和单击选项。

Yes, **pointers** can also be formatted specifically. If you plan on carving every detail of your web page then you must not forget about pointers. To deal with pointers we use Pointer-events property in CSS.

是的， **指针**也可以专门格式化。 如果计划雕刻网页的每个细节，那么一定不要忘记指针。 为了处理指针，我们在CSS中使用Pointer-events属性。

The **pointer-events property in CSS** allows controlling how elements are supposed to react to mouse/touch events. It also specifies whether or not the cursor is visible.

**CSS中**的**指标事件属性**允许控制元素应如何响应鼠标/触摸事件。 它还指定光标是否可见。

Those are quite a load of features. Let us understand them with the following example,

这些都是相当多的功能。 让我们通过以下示例了解它们，

**Syntax:**

**句法：**

Element {
        
        pointer-event: none|auto;
    }

### 指针事件属性值 **(**pointer-events Property values**)** ###

**1) auto**

**1)自动**

If we add auto as a prefix to something, we assume that the functionality would be automatic, which is quite true most of the time. The case is the same here, the element reacts to pointer events such as when we hover over an element. Thereby making the auto a **default property of pointers-event**.

如果我们将auto作为前缀添加到某物，则假定该功能将是自动的，这在大多数情况下是正确的。 这里的情况是一样的，元素对指针事件做出React，例如当我们将鼠标悬停在元素上时。 从而使auto成为**指针事件**的**默认属性** 。

Well, why stop at the definition? Go ahead and try the below-mentioned example,

好吧，为什么要停止定义呢？ 继续尝试下面提到的示例，

**Syntax:**

**句法：**

Element {
        
        pointer-event: auto;
    }

**Example:**

**例：**

<!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            div {
        
                pointer-events: auto;
            }
        </style>
    </head>
    
    <body>
        <h2>Pointer-events in CSS</h2>
        <div>Go to <a href="https://www.includehelp.com/">IncludeHelp</a></div>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | the pointer-event property | Example 1][CSS _ the pointer-event property _ Example 1]

In the above example, hover over and click the link **"IncludeHelp"** to see the effect in the above example,

在以上示例中，将鼠标悬停并单击链接**“ IncludeHelp”**以查看以上示例中的效果，

**2) none**

**2)无**

**"none"** is used when we do not want any task to be performed by the cursor. Therefore, this property prevents all click, state and cursor options on the specified element.

当我们不希望光标执行任何任务时，使用**“无”** 。 因此，此属性将阻止指定元素上的所有单击，状态和光标选项。

Let us try to understand this property much better with the help of an example,

让我们尝试通过一个示例更好地了解此属性，

**Syntax:**

**句法：**

Element {
        
        pointer-events: none;
    }

**Example:**

**例：**

<!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            div {
        
                pointer-events: none;
            }
        </style>
    </head>
    
    <body>
        <h2>Pointer-events in CSS</h2>
        <div>Go to <a href="https://www.includehelp.com/">IncludeHelp</a></div>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | the pointer-event property | Example 2][CSS _ the pointer-event property _ Example 2]

In the above example, if you hover over the **"IncludeHelp"** link you won't be able to click and go to the next page.

在上面的示例中，如果将鼠标悬停在**“ IncludeHelp”**链接上，将无法单击并转到下一页。

**Tip:** none should be used very wisely. As most of the time, we do want our cursor to perform some tasks but if you apply this property nothing would happen.

**提示：** 无应非常明智地使用。 在大多数时候，我们确实希望光标执行某些任务，但是如果您应用此属性，则不会发生任何事情。

> 翻译自: [https://www.includehelp.com/code-snippets/the-pointer-events-property-in-css.aspx][https_www.includehelp.com_code-snippets_the-pointer-events-property-in-css.aspx]

css指针悬停

[CSS _ the pointer-event property _ Example 1]: /images/20230208/ce3b4f6904984c9d88ec4228fa459b55.png
[CSS _ the pointer-event property _ Example 2]: /images/20230208/0f3b281350164bf4b91c568fd2a7a6a7.png
[https_www.includehelp.com_code-snippets_the-pointer-events-property-in-css.aspx]: https://www.includehelp.com/code-snippets/the-pointer-events-property-in-css.aspx