个人中心
gpt4 book ai didi

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

转载 作者：bug小助手 更新时间：2023-10-25 18:52:05 28 4
gpt4 key购买 nike



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-stlye。这是你一开始就不应该把它混合在一起的原因。

@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，这仍然不起作用。此外，+和~都在同一级别上进行选择。唯一的区别是~选择选择符后面的任何元素，而+只选择选择符后面的第一个元素，所以不确定您在这里做了什么。

28 4 0
文章推荐： How can I convert multiple completion handlers to async?(如何将多个完成处理程序转换为异步？)
文章推荐： I create this case 02 for create bill function. code is running well but the calculation always give 0 as the output(我为创建账单函数创建了这个案例02。代码运行良好，但计算结果始终为0)
文章推荐： Disabling Spring Security from running based on RequestURI(基于RequestURI禁止运行Spring Security)
文章推荐： How to importing library that define "favorites" at Flutter(如何导入在颤动中定义“收藏夹”的库)
bug小助手
个人简介

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

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com