悬停时背景大小不会更新

Background-size wont update on hover

本文关键字：更新 背景 悬停      更新时间：2023-09-26
我不知道

为什么，但是当我尝试在CSS和Jquery上使用悬停事件时，由于某种原因.css它不会更新文本。我的计划是制作其中一个幻灯片，您可以在图片上看到文本，并且在悬停时将显示更多文本。我需要背景，因为图片颜色，我不想让它变大，悬停时它会显示我希望它从小开始的文本。我不在乎它是由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>

如果您使用的是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>

您的问题已更新

  1. #First:hover + #Hovered1不会选择任何内容，因为#Hovered1不是#First的直系兄弟。
  2. #Hide总是隐藏的，所以如果你试图在其中展示一些东西，父母仍然是隐藏的，孩子也是。
  3. 完全改变你的方法。
相关文章：