hover 相关问题

我在 div 中有一个带有 WoodMineOwned id 的容器，当我的鼠标悬停在它上面时，我希望显示 Wood ToolTip，但它不会 HTML：我在 div 中有一个带有 WoodMineOwned id 的容器，当我的鼠标悬停在它上面时，我希望显示 Wood ToolTip，但它不会显示 HTML:  <div class="container"> <div class="tab"> ~<span class="textCenter">Buy Mines</span>~ <div class="tabContent tab1"> <h2 class="textCenter">Buy Menu</h2> <div class="mines container2"> <div class="minesContainer"> <div class="minesOwned" id="woodMineOwned">Wood Mine: 0</div> <div class="minesOwned" id="stoneMineOwned">Stone Mine: 0</div> <div class="minesOwned" id="coalMineOwned">Coal Mine: 0</div> <div class="minesOwned" id="ironMineOwned">Iron Mine: 0</div> <div class="minesOwned" id="silverMineOwned">Silver Mine: 0</div> <div class="minesOwned" id="goldMineOwned">Gold Mine: 0</div> <div class="minesOwned" id="diamondMineOwned">Diamond Mine: 0</div> </div> </div> </div> </div> </div> <div>  <div class="tipWoodMine" id="tipWoodMine" style="display: none;"> <h3>Wood Mine</h3> <p>Cost: 100 Wood | 50 Stone <span style="color: red">(+7%)</span></p> <p>Wood Per Second: 0 <span style="color: green">(+1)</span></p> <p>Owned: 0 <span style="color: green">(+1)</span></p> </div> </div> CSS: .container { display: flex; justify-content: space-around; margin-top: 20px; } .tab { position: relative; flex: 1; border: 1px solid #ccc; background-color: #f9f9f9; cursor: pointer; padding: 10px; text-align: center; } .tabContent { display: none; position: absolute; top: 100%; width: 392%; height: 300px; background-color: #f9f9f9; padding: 10px; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); } .tab:hover .tabContent { display: block; } .minesOwned { font-size: 75%; flex-basis: 30%; padding: 10px; margin-bottom: 10px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); } .textCenter { text-align: center; } /* Tool Tips */ .tipWoodMine { background-color: #f9f9f9; margin: 0 auto; width: 40%; height: 155px; text-align: center; border-radius: 10px; border: 1px solid grey; } #woodMineOwned:hover ~ .tipWoodMine { display: "block"; } 这就是我认为需要的所有代码，以表示抱歉，因为它很长：o 希望当我将鼠标悬停在木矿上时显示工具提示，但它不会显示为块。是不是因为WoodMine Owned在容器中而我制作的ToolTip不在容器div中？ .container { display: flex; justify-content: space-around; margin-top: 20px; } .tab { position: relative; flex: 1; border: 1px solid #ccc; background-color: #f9f9f9; cursor: pointer; padding: 10px; text-align: center; } .tabContent { display: none; position: absolute; top: 100%; width: 392%; height: 300px; background-color: #f9f9f9; padding: 10px; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); } .tab:hover .tabContent { display: block; } .minesOwned { font-size: 75%; flex-basis: 30%; padding: 10px; margin-bottom: 10px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); } .textCenter { text-align: center; } /* Tool Tips */ .tipWoodMine { background-color: #f9f9f9; margin: 0 auto; width: 40%; height: 155px; text-align: center; border-radius: 10px; border: 1px solid grey; display: none; position: absolute; z-index: 1; } #woodMineOwned:hover + .tipWoodMine { display: block; }  <div class="container"> <div class="tab"> ~<span class="textCenter">Buy Mines</span>~ <div class="tabContent tab1"> <h2 class="textCenter">Buy Menu</h2> <div class="mines container2"> <div class="minesContainer"> <div class="minesOwned" id="woodMineOwned">Wood Mine: 0</div> <div class="minesOwned" id="stoneMineOwned">Stone Mine: 0</div> <div class="minesOwned" id="coalMineOwned">Coal Mine: 0</div> <div class="minesOwned" id="ironMineOwned">Iron Mine: 0</div> <div class="minesOwned" id="silverMineOwned">Silver Mine: 0</div> <div class="minesOwned" id="goldMineOwned">Gold Mine: 0</div> <div class="minesOwned" id="diamondMineOwned">Diamond Mine: 0</div> </div> </div> </div> </div> </div> <div>  <div class="tipWoodMine" id="tipWoodMine"> <h3>Wood Mine</h3> <p>Cost: 100 Wood | 50 Stone <span style="color: red">(+7%)</span></p> <p>Wood Per Second: 0 <span style="color: green">(+1)</span></p> <p>Owned: 0 <span style="color: green">(+1)</span></p> </div> </div> 每当您想要将鼠标悬停在 #woodMineOwned 元素上时，工具提示都会向您显示一个块

html css hover

回答 1 投票 0

一旦我使用 Javascript 更改页面主题（包括元素），CSS 中的悬停效果就会停止对某些元素起作用

我正在开发一个作品集网站，顶部有一个带有 3 个按钮的菜单栏。我的问题是，当我通过切换将页面主题从深色更改为浅色时，会对悬停效果产生一些影响

javascript html css hover css-animations

回答 2 投票 0

当鼠标悬停在内部div上时，如何禁用外部div上的悬停效果？

我有一个带有悬停效果的外部 div 和一个内部按钮。当我将鼠标悬停在内部按钮上时，我试图禁用外部 div 上的悬停效果，但未能这样做。。容器 {

html css hover

回答 2 投票 0

当鼠标悬停在内部div上时，如何禁用外部div上的悬停效果？（CSS）

我有一个带有悬停效果的外部 div 和一个内部按钮。当我将鼠标悬停在内部按钮上时，我试图禁用外部 div 上的悬停效果，但未能这样做。任何见解都非常重要

html css hover

回答 1 投票 0

字体很棒的 CSS 中的奇怪下划线

当我将鼠标悬停在 font-awesome 的图标上时（当它们堆叠在一起时），如下所示（见图）。我得到这些奇怪的下划线。知道它们来自哪里吗？来源：当我将鼠标悬停在 font-awesome 的图标上时（当它们堆叠在一起时），如下所示（见图）。我得到这些奇怪的下划线。知道它们来自哪里吗？来源： <div class="text-center">  <a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555"> <i id="facebook" class="fa-3x fa fa-facebook-square"></i> </a>  <a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+@SolidTranslate" target="_blank" style="color : #555"> <i id="twitter" class="fa-3x fa fa-twitter-square"></i> </a>  <a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\ 0here:%20${shareURL}&source=${shareURL}" target="_blank" style="color : #555"> <i id="linkedin" class="fa-3x fa fa-linkedin-square"></i> </a>  <a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555"> <i id="googleplus" class="fa-3x fa fa-google-plus-square"></i> </a> </div> 这些线条通常来自默认（下划线）a元素样式。使用其他元素或删除下划线： a.social { /* or whatever your class */ text-decoration: none; } “文本装饰：无；”需要使用“a”标签上的“:hover”选择器进行设置，就像这样...... a:hover { text-decoration: none; } Fontawesome很棒又有趣。但如果您将其用作字体，这是预期的行为。为每个状态添加文本装饰。如果不添加:link，它会显示紫色下划线，很难看到，但它就在那里。如果不加:active，点击时会显示红色下划线，非常明显。 a:hover, a:focus, a:active, a:visited, a:link{ text-decoration: none; } 删除 text-decoration 以获得对所有 hover 类对象的 fa 效果： .fa:hover { text-decoration: none; } 假设您正在使用 a 标签 text-decoration: none; 可能还需要在类定义中使用 important 关键字 text-decoration: none !important; 嗯，我遇到了完全相同的问题，结果发现导致我的问题是我为容器设置的悬停效果的背景变化。我只需要将选择器更改为类选择器，一切就都解决了！我对这里所有错误的答案感到震惊。这些线条来自您的锚点，但这只是因为 <i> 和 <a> 元素之间有额外的空白。删除空格，线条就会消失。例如将 </i> </a> 变成 </i></a> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="text-center">  <a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555"><i id="facebook" class="fa-3x fa fa-facebook-square"></i></a>  <a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+@SolidTranslate" target="_blank" style="color : #555"><i id="twitter" class="fa-3x fa fa-twitter-square"></i></a>  <a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\ 0here:%20${shareURL}&source=${shareURL}" target="_blank" style="color : #555"> <i id="linkedin" class="fa-3x fa fa-linkedin-square"></i></a>  <a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555"> <i id="googleplus" class="fa-3x fa fa-google-plus-square"></i></a> </div>

css hover font-awesome

回答 8 投票 0

如何让鼠标悬停在一个div上时出现更多div？

我正在尝试弄清楚如何在将鼠标悬停在一个 div 上时显示更多 div。我知道如何在将鼠标悬停在同一 div 上时显示它的更改，但是如何在将鼠标悬停在一个 div 上时显示更多 div？ T...

javascript css html hover

回答 5 投票 0

HTML/Sass：多行时工具提示的位置被破坏

我当前项目中的工具提示代码如下： HTML：我当前项目中的工具提示代码如下： HTML： <div class="tooltip"> <img class="icons" src="(...)" alt="Icon"/> <span class="tooltip--text"> Hover-Text <span class="tooltip--text--arrow"></span> </span> </div> 萨斯： &--tooltip { cursor: pointer; position: relative; display: inline-block; &:hover { .tooltip--text { visibility: visible; opacity: 1; } } &--text { position: absolute; z-index: 1; visibility: hidden; width: 120px; max-width: 200px; background-color: #000; color: #fff; text-align: center; border-radius: 4px; padding: 3px 8px; margin-top: -3px; opacity: 0; transition: .3s; top: -45%; left: 45%; transform: translate(-50%, -50%); &--arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; bottom: -5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000 } } } 只要工具提示的文本在一行中，一切都可以根据需要完美运行。但是当工具提示有更多行时，工具提示的位置是错误的，我不知道如何解决这个问题。如有任何帮助，我们将不胜感激，并提前致谢！ .tooltip--text { position: absolute; z-index: 1; visibility: hidden; width: 120px; max-width: 200px; background-color: #000; color: #fff; text-align: center; border-radius: 4px; padding: 3px 8px; margin-top: -3px; opacity: 0; transition: .3s; bottom: 100%; left: 45%; transform: translateX(-50%); }

html sass hover tooltip

回答 1 投票 0

简单的 onclick（或 addEventListener）事件在平板电脑上不起作用

它适用于任何其他设备，除了 Lenovo Yoga Smart Tab 之外。我尝试过addEventListener，不起作用。我用 jQuery 尝试过“点击 touchstart”，但不起作用。有一个alert()在...

javascript html css onclick hover

回答 1 投票 0

悬停时图像底部边缘出现一条白线

我遇到了“div class gallery”内每个图像底部出现的白色像素线的问题。当鼠标悬停在其上时会出现白线[我已经包含了tran...

html css hover css-transitions transform

回答 3 投票 0

触发器：拖动时悬停选择器

我遇到了关于我目前正在开发的拖放系统的问题。我在 div 上有一个 :hover 样式，用户可以在上面放置一些东西。当我将鼠标悬停在它上面时它就可以工作，但不能...