在 <div> 上发送悬停影响的方式？

Question

我正在尝试找到一种方法，将我目前在网站主页上的悬停效果放置在我为每个页面的交互框设置的背景图像之上。

所以基本上，基于颜色的悬停效果应该在背景图像上生效，目前情况并非如此。正如您在框 1 和 3 中看到的那样，每次您将鼠标悬停在上面时，颜色都会发生变化。我希望对于所有也有图像的盒子都是如此。正如我所拥有的，我想不出一种将悬停效果带到堆栈顶部的方法。

基本上，从下面贴出的代码来看，我觉得我需要

.col-md-4:hover{
    background-color: #FFE097;
}

取代我在主页上设置的框。

这是我的主要 CSS：

.col-md-4 {
    color:#00A5D1;
    height:300px;
    border: 1px solid #FF8B6F;
}
.col-md-4:hover{
    background-color: #FFE097;
}
.col-md-4 h3 {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

/* Basic Structure
-------------------------------------------------------------- */

h3 {
    font-size:14px;
    text-align:center;
    font-family: 'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}

这是我主页的 HTML：

<style>
    h3 {
        font-size:36px;
        font-style: bold;
        text-align:center;
        font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
    }
    img {
        max-width: 100%;
        max-height: 100%;   
    }
    #div1 {
            background-image: url('');
            max-width: 100%;
            max-height: 100%;
            background: url('bgimage.jpg') no-repeat;
            background-size: 100%;
    }
    #div2 {
            background-image: url('FeatherPen2.jpg');
            background-position: center center; //center the image in the div
            background-size: contain; //cover the entire div
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    #div3 {
            background-image: url('');
            background-position: center center; //center the image in the div
            background-size: cover; //cover the entire div
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    #div4 {
            background-image: url('Birds%20on%20Wire.jpg');
            background-position: center center; //center the image in the div
            background-size: contain; //cover the entire div
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    #div5 {
            background-image: url('Shark Cans Logo.jpg');
            background-position: center center; //center the image in the div
            background-size: cover; //cover the entire div
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    #div6 {
            background-image: url('Ocean%20Water2.jpg');
            background-position: center center; //center the image in the div
            background-size: cover; //cover the entire div
            background-repeat: no-repeat;
            background-size: 110%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    #div7 {
            background-image: url('Piano.jpg');
            background-position: center center; //center the image in the div
            background-size: cover; //cover the entire div
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    #div8 {
            background-image: url('Gallery%20Image.JPG');
            background-position: center center; //center the image in the div
            background-size: cover; //cover the entire div
            max-width: 100%;
            max-height: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    #div9 {
            background-image: url('Handshake.png');
            background-position: center center; //center the image in the div
            background-size: cover; //cover the entire div
            background-repeat: no-repeat;
            background-size: 72%;
            opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    div {
        background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
        background-position: center center; //center the image in the div
        background-size: cover; //cover the entire div
    }
    </style>    
    </head>
    <body>
        <div class="container">
            <div class="row">
                <a href="About.html" title="About the site and Author"><div class="col-md-4">
                    <h3>About</h3>
                    </div></a>
                <a href="Articles.html" title="Original Articles and Content"><div class="col-md-4" id='div2'>
                    <h3>Articles</h3>
                </div>
                <a href="Coding Corner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4" id="">
                    <h3>Coding Corner</h3>
                </div></a>
            </div>
            <div class="row">
                <a href="Contact - Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4" id="div4">
                  <h3>Contact & Social</h3>
                </div></a>
                <a href="The FloodShark Main.html" title="The FloodShark Music and Media"><div class="col-md-4" id="div5">
                    <h3>
                    The FloodShark
                    Music
                    </h3>
                </div></a>
                <a href="Floodplain Productions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4" id="div6">
                    <h3>Floodplain Productions</h3>
                </div></a>
            </div>  
            <div class="row">   
                <a href="Classical Corner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4" id="div7">
                    <h3>Classical Corner</h3>
                </div></a>
                <a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4" id="div8">
                    <h3>Gallery</h3>
                </div></a>
                <a href="Contribute - Support - Donate.html" title="Contribute to The Floodplains!"><div class="col-md-4" id="div9">
                    <h3>Contribute / Support</h3>
                </div></a>
            </div>  
        </div>  
    </body>
</html>

我们将不胜感激任何和所有建议。

Answer 1

您可以使用堆叠在div 顶部的伪元素来创建叠加层。

添加以下 CSS：

.col-md-4 {
  ...
  position: relative;
}

.col-md-4:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background: #FFE097;
  opacity: 0;
}

.col-md-4:hover:after {
  opacity: .5;
}

.col-md-4 h3 {
  position: relative;
  z-index: 1;
  ...
}

fiddle