Question

我不知道为什么但是当我尝试在CSS和Jquery .css上使用悬停事件时由于某种原因它不会更新文本。我的计划是制作其中一个幻灯片，你看到图片上的文字，并在悬停更多的文字将显示。我需要背景，因为图片的颜色，我不想让它大，并在悬停它将显示文字我希望它从小开始。我不在乎它是由Jquery CSS制作的还是其他什么。我最终的目标也是为了动画它，据我所知，Jquery最简单，但我也可以做CSS

#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>

{{1}}

Answer 1

如果您使用top和right，则需要position: absolute：

＆＃13;

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

＆＃13;

#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
}

＆＃13;

<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>

＆＃13;

您的问题已更新

#First:hover + #Hovered1将不会选择任何内容，因为#Hovered1不是#First的直接兄弟。
#Hide总是被隐藏，所以如果你想在里面展示一些东西，父母仍然是隐藏的，孩子也是如此。
完全改变你的方法。

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

1 个答案: