hover 相关问题

悬停是指将鼠标光标放在给定元素上的操作。悬停还可以指启用触摸的设备上的用户触摸给定元素的事件。

为什么出现子菜单时悬停消失？

我的网站上有一行，当您将鼠标悬停在其上时，悬停会打开并出现一个附加按钮（用于展开子菜单）。这里一切正常 https://codesandbox.io/s/romantic...

javascript css reactjs hover

回答 1 投票 0

悬停效果和图像不透明度更改在 HTML/CSS 中不起作用

我正在开发一个网络项目，我正在尝试在包含图像的第一张卡片上创建悬停效果。当我将鼠标悬停在卡片上时，我希望卡片向上移动并且图像变得完整

javascript html css hover tailwind-css

回答 1 投票 0

为什么我无法让图像悬停效果像我想要的那样工作？

我正在为学校建立一个网页，现在我建立一个无乳糖页面有了一些悬停效果，现在我想让我的文本框更大，这样它看起来就不小了。所以我希望出现的框有更大的宽度，所以...

html css hover

回答 1 投票 0

如何在 CSS 中正确实现 #ID:hover{} 且不会与其他 HTML 元素错位？

所以，我第一次尝试使用元素，到目前为止我还没有遇到任何问题。但现在，我想要一个 div 框，其中有多个链接，如 ... 所以，我第一次尝试使用 <div> 元素，到目前为止我还没有遇到任何问题。但现在，我想要一个 div 框，它有多个 <a> 链接，因为 <img> 的目标是拥有一个用作动画的 #Image:hover 函数。实施也很顺利，但现在我遇到了我的问题，我没有发现任何具体的问题......每当我将鼠标悬停时，img 元素就会与其他 img 错位。现在我想知道我可以实施什么，这样它就不会错位...... 我有这个 CSS 部分： #Icons { margin: 8px 0 0; padding: 0; display: block; background-color: transparent; min-height: 43px; height: 43px; max-height: 43px; } #Image { margin: 0; padding: 0; width: 40px; height: 40px; } #Image:hover { margin: 0; padding: 0; width: 43px; height: 43px; } #Media { margin: 0 4px; display: inline-block; min-width: 43px; width: 43px; max-width: 43px; min-height: 43px; height: 43px; max-height: 43px; } 还有这个 HTML 部分： <p id="HeaderTwo">Reachable under</p> <div id="Icons"> <a id="Media" href="#"><img id="Image" src="../img/discord.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/gmail.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/telegram.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/youtube.png" /></a> </div> 我尝试将以下内容包含到一些 CSS 元素中，希望它能充当盒子限制器或其他东西。类似，这样就不会/不应该发生错位。 min-width: 43px; width: 43px; max-width: 43px; min-height: 43px; height: 43px; max-height: 43px; 要避免元素调整布局大小，请使用 transform scale。现在，除了您的具体问题外，请考虑以下修复：避免使用 ID 进行样式设置（而且 ID 必须是唯一的）悬停动画是告诉用户图像是可点击的，所以触发器应该在<a>标签上 .image { width: 40px; height: 40px; transition: transform .3s; will-change: transform; } .media { display: inline-block; margin: 0 4px; } .media:hover .image { transform: scale(1.075); } <div class="icons"> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?1" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?2" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?3" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?4" /></a> </div>

html css hover alignment

回答 1 投票 0

如何去除散景中悬停收费的“屏幕信息”？

我使用散景绘制了一个图，此外，我还使用“悬停”工具来查看点的值。但我还看到另一个值调用：“屏幕”我想禁用该内容的显示...

python hover bokeh

回答 3 投票 0

如何更改悬停时选中的单选按钮的颜色？

<input class="custom-radio" type="radio" name="selected_center" value="{{center.id}}" id="selected_center_{{center.id}}">  input[type='radio'] { accent-color: #0098ff; } 我已将悬停属性与输入单选标签一起使用，但不起作用。不确定您为什么要这样做，但您可以做到。 body { margin: 1em; font-family: sans-serif; } .custom-radio>label { display: block; font-size: 1.5em; margin: 0.25em 0; } .custom-radio>label>input[type=radio] { transform: scale(2); vertical-align: middle; margin-right: 1em; } .custom-radio>label:nth-child(1)>input[type=radio] { accent-color: red; } .custom-radio>label:nth-child(2)>input[type=radio] { accent-color: darkorange; } .custom-radio>label:nth-child(3)>input[type=radio] { accent-color: green; } .custom-radio>label:hover { color: blue; } .custom-radio>label:hover>input[type=radio] { accent-color: blue; } .custom-radio>label>input[type=radio]:not(:checked) { cursor: pointer; } <div class="custom-radio"> <label><input type="radio" name="radio1"> Stop</label> <label><input type="radio" name="radio1"> Wait</label> <label><input type="radio" name="radio1"> Go</label> </div>

html css radio-button hover radio-group

回答 1 投票 0

页面加载后，带有锚链接 url (/#xxxx) 的菜单项就会停留在悬停/活动状态，并且没有任何触发。 WordPress/阿瓦达

经过太多时间的挫败感，不明白发生了什么，随机测试的想法似乎已经证实了问题，但不知道如何正确解决，我真的不确定......

css wordpress hover anchor

回答 1 投票 0

如何使用 HMTL 和 CSS 创建一层带有内容的向上箭头形状 div？每个向上箭头形状都是可悬停的，但只能悬停在箭头内部

我已经尝试过这个，但只使用了箭头图像。但由于 div 部分的形状为矩形，因此没有箭头的区域仍然可以悬停。我想问一下有没有办法塑造...

html css hover

回答 1 投票 0

仅在我直接悬停的元素上应用悬停样式

我有多个元素，其类名为 h-me。标记看起来有点像这样：我有多个元素，其类名为 h-me。标记看起来有点像这样： <span class="h-me"> <span class="h-me"> <span class="h-me"> x </span> <span class="h-me"> y </span> </span> </span> CSS 看起来像这样： .h-me:hover { background: rgba(0, 0, 0, 0.1); } 当我将鼠标悬停在内容为“x”的 span 标签上时，它会更改所有 span 元素的背景，因为从技术上讲，我将鼠标悬停在所有这些元素上。有什么方法可以只更改我严格悬停的元素的背景吗？这里有一个限制。我无法以任何方式更改标记。我将不得不依靠一些 CSS 或 JavaScript 技巧来完成它。谢谢。您必须组合使用 :not() 和 :has() css 函数才能获得所需的结果。下面给出的例子： .h-me:not(:has(.h-me:hover)):hover { background: rgba(0, 0, 0, 0.1); } <span class="h-me"> <span class="h-me"> <span class="h-me"> x </span> <span class="h-me"> y </span> </span> </span>

javascript html css hover

回答 1 投票 0

将鼠标悬停在另一个元素上时，元素未出现

当我将鼠标悬停在 p1 元素上时，h1 元素应该会出现，但它没有出现。我对此有点困惑，因为当我查找它时，这就是它所说的，但它似乎不起作用......

html css css-selectors hover mouseover

回答 1 投票 0

css：悬停时在两个图像之间更改[关闭]

我正在尝试在此网站中的两个图像之间进行更改 “我们是谁”部分：我试图将圆圈的背景设为蓝色，将图标设为白色（我也得到了白色图像）。我尝试过...

html css hover

回答 1 投票 0

Tailwind CSS 自定义悬停动画

我用顺风创建了一个眼睛图标动画，但是我无法在悬停时制作它:(你能指导我如何在悬停时制作动画吗？:) Tailwind 眼睛图标动画感谢您的帮助！！