背景大小在悬停时不会更新

Question

背景大小在悬停时不会更新

4

我不知道为什么，但是当我尝试在CSS和JQuery上使用hover事件时，某种原因它不会更新文本。我的计划是制作一个幻灯片展示，在图片上看到文字，悬停时会显示更多的文字。由于图片的颜色，我需要背景，并且我不想让它变大，当悬停时它会显示文本，我希望它从小开始。无论是用JQuery CSS还是其他方式制作都可以。我的最终目标也是通过动画来完成，据我所知，使用JQuery最容易，但我也可以使用CSS。

$("#ShortText").css({
    fontSize:screen.height*.015,
    //right: screen.width * .18,
    //top: screen.height * .585,
    width:screen.width * .6,
    right: screen.width * .2,
    top:screen.height*.65
});

#ShortText{
    background-color: rgba(0, 0, 0,.6);
}

#Hide{
    display:none
}

#ShortText:hover{
    background:blue;
    background-size:100% 100%;   
    position:absolute;
}

#First:hover + #Hovered1{
    display:block
}

body{
    color:white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="ShortText">
        <div>
            <h1 id="First">1</h1>
            <p id="Hovered1">Hoverd </p>
        </div>
        <div>
            <h1 id="Second">2</h1>
            <p id="Hovered2">Hoverd </p>
        </div>
        <div>
            <h1 id="Third">3</h1>
            <p id="Hovered3">Hoverd </p>
        </div>
    </div>

- saarsc

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen Kumar Purushothaman · Answer 1

如果你正在使用 top 和 right，你需要添加 position: absolute：

$("#ShortText").css({
  fontSize:screen.height*.015,
  right: screen.width * .18,
  top: screen.height * .585,
  width:screen.width * .6
});

#ShortText{
  background-color: rgba(0, 0, 0,.6);
}
#Hide{
  display:none
}
#ShortText:hover{
  background:blue;
  background-size:100% 100%;   
  position: absolute;
}
#First:hover + #Hovered1{
  display:block
}
body{
  color:white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShortText">
  <div >
    <h1 id="First">1</h1>
  </div>
  <div>
    <h1 id="Second">2</h1>
  </div>
  <div>
    <h1 id="Third">3</h1>

  </div>
</div>
<div id="Hide">
  <p id="Hovered1">Hoverd </p>
  <p id="Hovered2">Hoverd </p>
  <p id="Hovered3">Hoverd </p>
</div>

您的问题已更新

#First:hover + #Hovered1 不会选择任何内容，因为 #Hovered1 不是 #First 的直接兄弟。
#Hide 总是隐藏的，所以如果您想要显示其中的内容，其父元素仍然是隐藏的，子元素也是如此。
完全改变您的方法。