Question

我在网站上搜索过但没有发现任何与我的问题完全相关的解决方案。我在整个页面上创建一个横幅，其中包含四个不同的图像，当您翻转时，将对图像进行着色并显示一些文本。我遇到的问题是，它们要么叠加在一起，要么在固定时，悬停只适用于其中一个。这是我到目前为止的代码。

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>

这是我到目前为止所提供的任何帮助都将不胜感激。

Answer 1

这应该解决它：

.school-container2 {
    position: relative;
}

使用position：absolute（对于叠加层）时，需要注意元素的父级。 position：absolute属性总是相对于第一个位置：relative;在元素的父母中找到。我希望这是有道理的，如果没有，请查看https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 2

是的，位置相对正确。但它也会让你的生活更容易使用一些课程而不是ID。

使用替换某些ID

的类进行标记

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

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

CSS使用类以免冗余。

.school-container {
    display: inline-block;
    position:relative;
    /* you shouldn't need float:left and inline-block */
}

.school-box:hover {
    opacity:1;
}

.school-box {
    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;
}
.SAD-text {
    color: #fff;
    padding-top: 50px;
}

Answer 3

所以我喝了一些咖啡，然后弄清楚出了什么问题。就像睡眠不足的goofball一样，我忘了将悬浮潜水相对于它们所处的容器进行潜水，这是造成问题的原因。容器需要定义为相对容器，悬停项目必须是绝对的。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    .school-wrapper {
        float: left;
    }

    .school-container {
        display: inline-block;
        position:relative;
    }

    .school-box1:hover {
        opacity: 1;
    }

    .school-box2:hover {
        opacity: 1;
    }

    .school-title {
        color: #fff;
        font-family: "Roboto";
        font-size: 24px;
        padding-left: 10px;
        padding-top: 190px;
    }

    .school-text {
        color: #fff;
        font-family: "Roboto";
        font-size: 14px;
        padding-left: 10px;
        margin-top: -10px;
    }

    .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-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 class="school-wrapper">
        <div class="school-container">
            <a href="http://google.com">
                <img src="http://proservicesbburg.com/A-D-copy320.jpg" width="480" height="320" alt="image1" title="image1" />
                <div class="school-box1">
                    <p class="school-title">School of Hard Knocks</p>
                    <p class="school-text">Item 1 / Item 2 / item 3 / Item 4</p>
                </div>
        </a>
        </div>
    </div>
    <div class="school-wrapper">

        <div class="school-container">
            <a href="http://yahoo.com">
                <img src="http://proservicesbburg.com/mlsoc320-2.jpg" width="480" height="320" alt="image2" title="image2" />
                <div class="school-box2">
                    <p class="school-title">School of Silly String</p>
                    <p class="school-text">Item 1 / Item 2 / item 3 / Item 4</p>
                </div>
            </a>
        </div>
    </div>
    </body>
    </html>

我确实发现两个学校的盒子需要单独定义，或者它们没有用，但这是一个小问题。非常感谢您的帮助，并推动我找到正确的解决方案！

嵌套Div与动画CSS文本叠加

3 个答案: