文章/答案/技术大牛

发布

css鼠标事件

CSS鼠标事件基础概念

CSS鼠标事件是指通过CSS来响应用户的鼠标操作，如悬停（hover）、点击（active）等。这些事件可以通过CSS伪类来实现，不需要编写JavaScript代码。

类型

:hover：当鼠标悬停在元素上时触发。
:active：当鼠标按下并保持在元素上时触发。
:focus：当元素获得焦点时触发（例如通过Tab键导航）。
:visited：用于链接，表示用户已经访问过该链接。

应用场景

导航菜单：通过:hover伪类实现鼠标悬停时菜单项的高亮显示。
按钮样式：通过:active伪类实现按钮按下时的视觉反馈。
表单验证：通过:focus伪类实现输入框获得焦点时的样式变化。
链接样式：通过:visited伪类区分用户已访问和未访问的链接。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Mouse Events</title>
    <style>
        .button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        .button:hover {
            background-color: #45a049;
        }

        .button:active {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <button class="button">Click Me</button>
</body>
</html>

参考链接

MDN Web Docs: CSS Pseudo-classes

常见问题及解决方法

:hover效果不生效：
- 确保元素是可悬停的（例如，不是<input>或<button>等）。
- 确保CSS选择器正确。
- 检查是否有其他CSS规则覆盖了:hover样式。

:active效果不生效：
- 确保元素是可点击的（例如，<button>或<a>）。
- 确保CSS选择器正确。
- 检查是否有其他CSS规则覆盖了:active样式。

通过以上内容，你应该对CSS鼠标事件有了全面的了解，并能够应用到实际开发中。

页面内容是否对你有帮助？

有帮助

没帮助

一个半透明的<img>有可能对它下面的项目产生影响吗？

javascript、html、css、google-chrome-extension

为了实现这一点，我有一个插件注入JavaScript，它附加了一个带有以下CSS规则的标记： position: absolute; top:

浏览 1提问于2017-10-25得票数 1

回答已采纳

1回答

事件从覆盖的div传递到Highmap

javascript、highcharts、highmaps

当我点击地图上的div时，我想知道是否有方法触发地图上的单击、悬停等事件。建议为此使用pointer-events CSS属性。这并不能解决我的问题，因为我还需要在#overlay div上触发事件。

浏览 1提问于2018-03-07得票数 0

2回答

如何使用香草JS在动画的任意点反转CSS动画(或CSS转换)？

javascript、css

场景：对象在文件中的动画CSS属性(或CSS转换属性)，在CSS文件中使用，在JS文件中使用事件，在JS文件中使用使用JS文件中的JS事件侦听器函数(<code>f 213</co

浏览 7提问于2022-03-15得票数 0

1回答

如何防止手机中的默认事件

javascript、jquery、html、events、preventdefault

如何防止手机中的默认事件？eventDefault没有工作吗？请做铬试验，做铬试验<!="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" /> <style type="text/css

浏览 0提问于2015-09-15得票数 0

1回答

"Label tileLayer“黑客导致不可点击的覆盖层。

javascript、leaflet

使用来自的代码，我成功地在我的覆盖层上添加了一个位置/道路标签的tileLayer。然而，这已经有了不幸的副作用，阻止任何点击到覆盖层下面。请参见，其中我向顶部添加了一层标签，其中： "tilejson": "2.0.1", "tiles":['http://c.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png

浏览 3提问于2016-01-29得票数 0

回答已采纳

3回答

老鼠和老鼠

jquery、mousedown、mouseup

因此，我希望按钮在鼠标关闭时改变样式，并在鼠标上升时返回到以前的按钮。我有这样的代码： $(this).css({ }); $(this).css({

浏览 6提问于2013-01-08得票数 1

回答已采纳

1回答

根据鼠标滚轮- Javascript旋转图像的圆圈

javascript、jquery、mootools

我想要建立一个功能，让用户旋转的圆圈轮使用鼠标，并选择一个图像。我怎么能造出这样的东西呢？有可用的插件吗？

浏览 4提问于2011-09-21得票数 1

1回答

在工具提示中添加按钮

php、d3.js

目前，我将此用于服务器监视：我已经浏览了d3js工具提示文档：现行法典：var nodeEnter = node.enter().append("g") .attr("transform", function(d) { r

浏览 0提问于2014-05-23得票数 1

4回答

使用jQuery的表格行背景颜色

jquery

$('tr').on('mouseenter', function(){}); $(this).css({background:''});当用户将鼠标从A列移动到B列(同一行)时，将触发mouseout事件。测试用例:用'Foo‘将<

浏览 9提问于2015-05-26得票数 1

回答已采纳

2回答

菜单管理悬停和单击事件

javascript、jquery、css

我有一个想要添加悬停和单击事件的菜单。$('a').hover(function(){}, function(){}); $(this).css('background', &#

浏览 15提问于2019-10-10得票数 0

2回答

带有mouseenter和mouseleave事件菜单

javascript、jquery、mouseevent

我试图做一个菜单，但我有问题的鼠标/鼠标保存事件。").css('display', "block");}); 到目前为止，我试过这个。现在我想把它打开，就像有人把鼠标放在“图标”或实际菜单上一样长。但是使用我提供的代码，一旦我离开我的鼠标，然后再次进入“图标”，它仍然保持onmouseenter事件，菜单将再次出现。我知道我可以取消onmouseenter事件的绑定，

浏览 3提问于2012-12-08得票数 1

回答已采纳

1回答

如何在d3地图中绘制不同的边框

d3.js、svg

我试图在地图上添加svg路径，但是鼠标切换和鼠标输出失败了。我能做什么?

浏览 1提问于2016-08-25得票数 1

回答已采纳

1回答

.mouseover在这段代码中不能正常工作

javascript、jquery、html、css

"; $("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX

浏览 2提问于2014-09-23得票数 0

回答已采纳

2回答

即使我离开了div，JQuery悬停鼠标输入事件也会触发

jquery、hover

ul><li><p id="b">B</p></li></ul>我添加了如下悬停事件$(this).attr('id') ==

浏览 1提问于2011-06-16得票数 0

2回答

函数创建mouseover事件

jquery、function、variables、mouseover、mouseout

我试图创建一个包含变量的mouseover事件函数。我计划使用if和else来实现mouseover和mouseleave (或out)。我已经尝试在//注释中的这个链接中进一步解释这一点。function () {}); $("#block").css;$

浏览 2提问于2013-06-29得票数 0

回答已采纳

1回答

调试UI组件在一个环境中呈现/行为正确的原因，而在另一个环境中不正确

javascript、html、css

我已经在javascript+html+css中创建了一个codesandbox.com UI组件，它在某些鼠标事件上正确地行为/呈现。因此，我想捕获并比较组件的html标记的CSS属性的变化，当它们与鼠标交互时。在codesandbox中，我可以获取chrome工具的屏幕快照，以捕获使用鼠标与组件的特定HTML标记交互时CSS属性的变化，因为列出的CSS属性数量很少。所以，当我鼠标移动到UI组件的html标记上时，

浏览 7提问于2022-07-10得票数 0

3回答

Javascript Mouseover事件行为异常

javascript、jquery、html、css

我尝试显示一个包含子元素的div容器，只显示容器的顶部，直到鼠标移动到它上面，然后显示整个容器，包含子元素和内容。这有点像我想要的那样工作，但问题是，如果你把鼠标移到任何一个子元素上，整个主容器就会向上滑动，然后又向下滑动。<div onmouseover="$('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css

浏览 3提问于2013-04-16得票数 0

回答已采纳

1回答

如何让.hover与if语句一起使用

jquery、if-statement、jquery-hover、mousehover

试图弄清楚如何让.hover函数工作，并使标签-> $('.column1').css("left"，"calc(-100vw + 180px)")；当您将鼠标悬停在...？但仅当标签处于其"calc(-100vw + 180px)“状态时，而不是$(".column1").css("left"，"0")；这是当它完全打开时。("left", "0");

浏览 7提问于2019-10-17得票数 0

1回答

通过另一个元素检测jQuery悬停？

javascript、jquery、hover

我遇到的问题是，当拖动元素时，它被放在鼠标和拖放区域之间，我找不到一种合适的方法来通过拖放元素检测悬停在拖放区域上，而不是稍微偏移一下。$(window).mousemove(function (event) { 'left' : event.pageX-30 + 'px', });上面的代码移动一个简单

浏览 0提问于2012-10-13得票数 3

回答已采纳

2回答

.remove()在D3中的临时替代方案

javascript、css、d3.js、tooltip、mouseevent

当我在一个对象上鼠标移动时，工具提示就会消失到视图中。当我离开的时候，工具提示就会消失。问题是，我希望以后能在鼠标移动时重新添加它。

浏览 3提问于2018-01-26得票数 4

回答已采纳

点击加载更多

css鼠标事件