:hover not working, I've tried with everything I can think of(：盘旋不起作用，我已经试过我能想到的一切了)-6ren

:hover not working, I've tried with everything I can think of(：盘旋不起作用，我已经试过我能想到的一切了)

转载作者：bug小助手更新时间：2023-10-25 21:19:59

I have a Container in a div with WoodMineOwned id, when my mouse hovers over it I want the Wood ToolTip to show but it won't

我在div中有一个容器，带有WoodMineOwned id，当我的鼠标悬停在它上面时，我希望显示Wood工具提示，但它不会显示

<!-- TAB 1 ~Mines~-->
<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>
  <!-- Wood ToolTip -->
  <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>

.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";
}

That's all the code I think is needed to show. Sorry for it being long: I want the tooltip to show when I hover over the wood mine but it just won't appear as a block. Is it because the WoodMine Owned is in a container and the ToolTip that I made is not in the container div?

这就是我认为需要显示的所有代码。很抱歉它太长了：我希望当我将鼠标悬停在木矿上时显示工具提示，但它不会显示为一个块。是不是因为拥有的Woodmine是在容器中，而我制作的工具提示不在容器div中？

更多回答

Read into specificity weight. CSS can not overwrite inline-stlye without !important. A reason why you should not mix it in the first place.

读取特异性权重。CSS不能覆盖inline-statistics没有！重要.一开始就不应该混合的原因。

@tacoshy sorry im pretty new to coding, can you give me an example of a work around or how to use this !important rule to fix it? it would help a ton.

@Tacoshy抱歉我对编程很陌生，你能给我一个解决办法的例子吗？或者如何使用这个！重要的规则来修复它？这会有很大帮助的。

Great resources here and here to learn about specificity.

伟大的资源在这里和这里学习特异性。

优秀答案推荐

Reasons why your attempt isn't working:

您尝试失败的原因：

General sibling combinator ~ doesn't match .tipWoodMine because it is not a sibling

You have display: "block"; but "block" is not a valid value

style="display: none;" inline overrules the stylesheet declarations

To achieve the desired result:

要达到预期效果，请执行以下操作：

Move the tooltip container to be the adjacent sibling of the mine container

You can use a more generic class name (instead of unique classes for each) along with the adjacent sibling combinator + to display the tooltip

.tip {
  display: none;
}

.minesOwned:hover + .tip {
  display: block;
}

<div class="minesOwned" id="woodMineOwned">Wood Mine: 0</div>

<!-- Wood ToolTip -->
<div class="tip">
  <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 class="minesOwned" id="stoneMineOwned">Stone Mine: 0</div>

<!-- Stone ToolTip -->
<div class="tip">
  <h3>Stone Mine</h3>
  <p>Cost: 100 Wood | 50 Stone <span style="color: red">(+7%)</span></p>
  <p>Stone Per Second: 0 <span style="color: green">(+1)</span></p>
  <p>Owned: 0 <span style="color: green">(+1)</span></p>
</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 */
.tip {
  display: none;
  margin: auto;
  width: fit-content;
  /* width: 40%; */
  /* height: 155px; */
  /* text-align: center; */
  background-color: #f9f9f9;
  border-radius: 10px;
  border: 1px solid grey;
}

.minesOwned:hover + .tip {
  display: block;
}

<!-- TAB 1 ~Mines~-->
<div class="container">
  <div class="tab">
    ~Buy Mines~
    <div class="tabContent tab1">
      <h2>Buy Menu</h2>

      <div class="minesContainer">
        <div class="minesOwned" id="woodMineOwned">Wood Mine: 0</div>

        <!-- Wood ToolTip -->
        <div class="tip">
          <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 class="minesOwned" id="stoneMineOwned">Stone Mine: 0</div>

        <!-- Stone ToolTip -->
        <div class="tip">
          <h3>Stone Mine</h3>
          <p>Cost: 100 Wood | 50 Stone <span style="color: red">(+7%)</span></p>
          <p>Stone Per Second: 0 <span style="color: green">(+1)</span></p>
          <p>Owned: 0 <span style="color: green">(+1)</span></p>
        </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>

Issue with the CSS selector! use the adjacent sibling selector + instead of ~ because the tooltip is not a sibling of the #woodMineOwned element, it's a child of a different container

Css选择器的问题！使用相邻的同级选择符+而不是~，因为工具提示不是#wood MineOwned元素的同级，而是不同容器的子级

the corrected code will be

更正后的代码将是

#woodMineOwned:hover + .tipWoodMine {
    display: block;
}

Thanks!

谢谢!

更多回答

This will still not work due to the inline style of the element being display: none. Also + and ~ both select on the same level. The only difference is that ~ selects any element coming after the selector, while + only selects the first after the selector, so not sure what you are on about here.

由于元素的内联样式DISPLAY：NONE，这仍然不起作用。此外，+和~都在同一级别上进行选择。唯一的区别是~选择选择符后面的任何元素，而+只选择选择符后面的第一个元素，所以不确定您在这里做了什么。

文章推荐： Flutter Because easy_localization(颤动是因为容易本地化)

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

bug小助手

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

:hover not working, I've tried with everything I can think of(：盘旋不起作用，我已经试过我能想到的一切了)