个人中心
gpt4 book ai didi

html - 带有动画 CSS 文本覆盖的嵌套 Div

转载 作者：行者123 更新时间：2023-11-28 06:45:33 24 4
gpt4 key购买 nike

我搜索了整个网站，但没有找到任何与我的问题完全相关的解决方案。我正在全宽页面上创建一个横幅，其中包含四个不同的图像，当您将鼠标悬停时，这些图像会为图像加阴影并显示一些文本。我遇到的问题是它们要么堆叠在一起，要么如果固定悬停只对其中一个起作用。这是我到目前为止的代码。

https://jsfiddle.net/robertav/n9Le5rzj/1/embedded/result/ 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#wrapper {width:9999px;}

#school-container1 {
    display: inline-block;
    float:left;}
#school-container2 {
    display: inline-block;
    float:left;}

#school-container1 #school-box1:hover {
    opacity:1;}
#school-container2 #school-box2:hover {
    opacity:1;}

.SAD-text {
    color: #fff;
    padding-top: 50px;}

#school-container1 #school-box1 {
    width:480px;
    height:320px;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    background-color: rgba(0,0,0,0.75);
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;}
#school-container2 #school-box2 {
    width:480px;
    height:320px;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    background-color: rgba(0,0,0,0.75);
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;}
</style>
</head>

<body>
<div id="wrapper">
  <div id="school-container1">
    <img src="http://proservicesbburg.com/A-D-copy320.jpg" width="480" height="320" alt="image1" title="image1" />
    <div id="school-box1">
      <p class="TEST 2</p>
    </div>
  </div>

  <div id="school-container2" >
    <img src="http://proservicesbburg.com/mlsoc320-2.jpg" width="480" height="320" alt="image2" title="image2" />
    <div id="school-box2">
      <p class="SAD-text">TEXT</p>
    </div>
  </div>
</div>
</body>
</html>

这就是我目前所拥有的，任何帮助将不胜感激。

最佳答案

这应该可以解决:

.school-container2 {
    position: relative;
}

当您使用 position: absolute (用于覆盖)时，您需要注意元素的父元素。 position: absolute 属性总是相对于第一个position: relative；在元素的父元素中找到。我希望这是有道理的，如果没有，请查看此 https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

关于html - 带有动画 CSS 文本覆盖的嵌套 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34071497/

24 4 0
文章推荐： html - 如何更改或切换移动版本的结构？
文章推荐： javascript - 为 phantomJS headless 浏览器添加 jQuery 选择器控件
文章推荐： css - 如何编写代码以显示单个类的三个图像按钮？
文章推荐： swift - view.endEditing 导致应用程序在某些文本字段上卡住
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com