我不知道为什么,但是当我尝试在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>