Questions tagged «hover»

我想看看:hover我在Chrome中徘徊的锚点的样式。在Firebug中，有一个样式下拉菜单，允许我为元素选择不同的状态。 我似乎在Chrome中找不到任何类似的东西。我想念什么吗？

855 css  google-chrome  hover  state  google-chrome-devtools 

我想做的是 div对象悬停时，它将影响另一个对象的属性div。 例如，在此JSFiddle演示中，当您将鼠标悬停在#cube其上时，它会发生变化，background-color但是我想要的是，当我将鼠标悬停在上时#container，#cube它会受到影响。 div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } <div id="container"> <div id="cube"> </div> </div> 运行代码段隐藏结果展开摘要

459 html  css  hover 

在stackoverflow中，当我们将鼠标悬停在用户的声誉上时，会看到一条文本。我已经在很多地方看到了这一点，源代码告诉我，无需js即可完成。我试过了，只有这个 <div="text">hover me</div>

262 html  hover 

我使用HTML列表和CSS创建了一个水平菜单。除非您将鼠标悬停在链接上，否则一切都会正常进行。可以看到，我为链接创建了一个粗体悬停状态，现在由于粗体大小的差异，菜单链接发生了变化。 我遇到与此SitePoint帖子相同的问题。但是，该职位没有适当的解决方案。我到处都在寻找解决方案，但是找不到。当然，我不能成为唯一尝试这样做的人。 有人有什么想法吗？ PS：我不知道菜单项中文本的宽度，因此我不能仅设置li项的宽度。 .nav { margin: 0; padding: 0; } .nav li { list-style: none; display: inline; border-left: #ffffff 1px solid; } .nav li a:link, .nav li a:visited { text-decoration: none; color: #000; margin-left: 8px; margin-right: 5px; } .nav li a:hover{ text-decoration: none; font-weight: bold; } .nav li.first { …

204 html  css  hover  text-size 

在新的Angular2框架中，是否有人知道像事件一样进行悬停的正确方法？ 在Angular1中有ng-Mouseover，但似乎没有保留。 我已经浏览了文档，却没有发现任何东西。

196 javascript  angular  events  hover 

我有一些CSS，悬停时CSS过渡效果会移动div。 正如您在示例中看到的那样，问题在于translate过渡具有可怕的副作用，即使div中的图像向下/向右移动1px（并且可能会略微调整大小吗？），以至于它看起来不合适并没重点... 毛刺似乎一直在应用悬停效果的整个过程中，并且从反复试验的过程中，我可以肯定地说，似乎仅在平移过渡移动div时才出现（框阴影和不透明度也适用，但对删除后的错误）。 仅当页面具有滚动条时，才会出现该问题。因此，仅使用一个div实例的示例就可以了，但是一旦添加了更多相同的div，并且页面因此需要滚动条，问题就会再次出现。

150 css  image  hover  positioning  translate-animation 

我创建了一个带有始终可见的上一个和下一个按钮的轮播。这些按钮处于悬停状态，它们变为蓝色。在诸如iPad的触摸设备上，悬停状态为粘滞状态，因此在点击它后按钮保持蓝色。我不要 我可以为每个按钮添加一个no-hover类ontouchend，并使CSS像这样：button:not(.no-hover):hover { background-color: blue; }但这可能会降低性能，并且不能正确处理Chromebook Pixel（具有触摸屏和鼠标）之类的设备。 我可以向中添加一个touch类documentElement，并使CSS像这样：html:not(.touch) button:hover { background-color: blue; }但是，这在同时带有触摸和鼠标的设备上也无法正常工作。 我更希望删除悬停状态ontouchend。但这似乎是不可能的。聚焦另一个元素不会删除悬停状态。手动点击另一个元素可以，但是我似乎无法在JavaScript中触发它。 我发现的所有解决方案似乎都不完美。有没有完美的解决方案？

144 javascript  css  hover  touch 

:hover如果用户通过触摸设备访问我们的网站，我想忽略所有CSS声明。因为:hoverCSS没有意义，而且如果平板电脑在单击/点击时将其触发，它甚至可能会令人不安，因为它可能会一直停留到元素失去焦点为止。老实说，我不知道为什么触摸设备首先感觉到需要触发:hover-但这是现实，所以这个问题也是现实。 a:hover { color:blue; border-color:green; // etc. > ignore all at once for touch devices } 因此，如何:hover在声明触摸设备后立即删除/忽略所有CSS 声明（而不必知道每个CSS ）？

141 html  css  hover  touch 

在许多站点（例如http://www.clearleft.com）上，您会注意到，当链接悬停在链接上时，它们将淡化为其他颜色，而不是立即切换（默认操作）。 我假设使用JavaScript来创建这种效果，有人知道吗？

134 css  hover  fade  effect 

我有一些我以前建立的网站，使用jquery鼠标事件...我刚得到一个ipad，我注意到所有鼠标悬停事件都是通过单击转换的...因此，例如，我必须单击两次而不是单击一次..（第一个鼠标悬停，而不是实际点击） 是否有准备解决此问题的解决方法？也许我应该使用jquery命令来代替mouseover / out等。谢谢！

125 jquery  ipad  hover  mouseover 

使用这样的HTML： <p>Some Text</p> 然后像这样的一些CSS： p { color:black; } p:hover { color:red; } 如何允许在启用触摸的设备上进行长时间触摸来复制悬停？我可以更改标记/使用JS等，但是想不出一种简单的方法来做到这一点。

120 javascript  html  css  hover  touch 

有什么方法可以与:hover 仅使用 CSS 相反吗？如：如果:hover是on Mouse Enter，是否有一个CSS等效于on Mouse Leave？ 例： 我有一个使用列表项的HTML菜单。当我将其中一项悬停时，会有CSS彩色动画从#999到black。当鼠标离开动画时black，#999如何从项目区域中创建相反的效果？ jsFiddle （请记住，我不想仅回答此示例，而不想回答整个:hover问题。）

115 css  hover 

我正在编写一个打算同时在台式机和平板电脑上使用的网站。当从桌面上访问它时，我希望屏幕的可单击区域以各种:hover效果（不同的背景色等）亮起。使用平板电脑时，没有鼠标，所以我不希望任何悬停效果。 问题是，当我在平板电脑上点击某物时，浏览器显然具有某种“隐形鼠标光标”，它会移动到我点击的位置，然后将其留在那儿-所以我刚刚点击的东西会亮起悬停效果，直到我点击其他东西。 使用鼠标时如何获得悬停效果，而使用触摸屏时如何抑制它们？ 万一有人在想建议，我不想使用用户代理嗅探。同一台设备可能同时具有触摸屏和鼠标（今天可能不那么普遍，但将来会越来越多）。我对设备不感兴趣，对当前使用方式不感兴趣：鼠标或触摸屏。 我已经尝试挂钩touchstart，touchmove和touchend事件，并呼吁preventDefault()对所有的人，这确实抑制“隐形鼠标”的一些时间; 但是，如果我在两个不同的元素之间快速来回轻按，轻按几下，它将开始移动“鼠标光标”并preventDefault始终照亮悬停效果-好像我并不总是很荣幸。除非有必要，否则我不会为您提供任何细节-我什至不确定这是否是正确的方法。如果有人有一个更简单的解决方法，我将不知所措。 编辑：可以使用bog-standard CSS复制:hover，但这是一个快速的复制参考。 <style> .box { border: 1px solid black; width: 150px; height: 150px; } .box:hover { background: blue; } </style> <div class="box"></div> <div class="box"></div> 如果将鼠标悬停在任何一个框上，它将获得蓝色的背景，这是我想要的。但是，如果您点击其中任何一个框，它也会显示蓝色背景，这是我要防止的事情。 我还在此处发布了一个示例，该示例执行了上述操作，并且还挂钩了jQuery的鼠标事件。您可以使用它来查看点击事件也会触发mouseenter，mousemove并且mouseleave。

113 javascript  hover  touch 

我正在尝试通过Chrome的开发人员工具查看网站上的工具提示的结构。但是，即使将鼠标悬停在该项目上，当我“检查元素”时，HTML中的工具提示也不会显示任何内容。我知道我可以将Style设置为:hover，但是仍然看不到工具提示的html或css。 有任何想法吗？

106 html  css  hover  google-chrome-devtools 

我有一套 <a>标签，标签的rgba背景颜色不同，但是alpha相同。是否可以编写单个CSS样式来仅更改rgba属性的不透明度？ 代码的简单示例： <a href="#"><img src="" /><div class="brown">Link 1</div></a> <a href="#"><img src="" /><div class="green">Link 2</div></a> 和样式 a {display: block; position: relative} .brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);} .green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);} 我想做的是编写一种样式，当将<a>鼠标悬停在其上时会更改不透明度，同时保持颜色不变。 就像是 a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

100 css  hover  background-color  rgba