我不知道为什么,但是当我出于某种原因尝试在 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>
您的问题已更新
#First:hover + #Hovered1
将不选择任何内容,因为#Hovered1
不是#First
的直接兄弟。#Hide
始终是隐藏的,因此如果您试图显示其中的某些内容,父级仍处于隐藏状态,子级也是如此。- 彻底改变你的方法。
关于javascript - 悬停时背景大小不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35081815/