javascript - 悬停时背景大小不会更新

标签 javascript jquery html css

我不知道为什么,但是当我出于某种原因尝试在 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>

  
 
  

最佳答案

如果您使用topright,您需要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. 彻底改变你的方法。

关于javascript - 悬停时背景大小不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35081815/

相关文章:

php - 如何在 Magento 中使用 getThumbnailUrl() 显示来自类别的缩略图

Javascript boolean 参数未正确传递

javascript - 使用 javascript(或不使用)链接网页和内容的最佳方式

javascript - append 一个 div 作为 ul 的父级

javascript - 如何设置元素水平增长而不是换行?

javascript - Spring MVC文件上传,通常进度条是由Javascript完成的?

javascript - 如何获取 div 的坐标?

html - 插入文字效果适用于 Chrome,但不适用于 Firefox

javascript - 如何获取未知数量数组中未知数量元素的所有组合?

javascript - React.js .push() 不是函数