Question

嘿伙计们，我得到了一张半褪色的图像，当你将鼠标悬停在它上面时，它会淡入屏幕。我还有一个盒子，当你将鼠标悬停在它上面时，它会改变颜色。然而问题是，如果我让框围绕图像，唯一有效的是框改变颜色，因此它与其他图像重叠。有任何解决这个问题的方法吗？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>

<style>
.meh
{
    position: relative; 
    opacity:0.5;
    filter:alpha(opacity=40); 
    width: 200px;
    height: 200px;
    top: -550px;
    left: 740px;

}

.meh:hover
{
    opacity:1.2;
    filter:alpha(opacity=100); 
}

.border
{
    position: relative; 
    height: 200px; 
        width:  200px; 
        border: 1px solid black;  
        text-align:center; 
    top: -650px;
}

.border:hover
{
    border: 1px solid green;
}
    </style>


</head>
<body>

<div class="meh">
        <img src="http://lorempixel.com/50/50" alt="meh">
</div>


<div class="border">    
</div>

</body>
</html>

Answer 1

为什么有顶部：-550px;值给出了??

我在这里删除了这些值。

方法 - 1 （为了获得整个div的悬停效果）

.meh
{
    position: relative; 
    opacity:0.5;
    filter:alpha(opacity=40); 
    width: 200px;
    height: 200px; 
}
.meh:hover
{
    opacity:1.2;
    filter:alpha(opacity=100); 
}
.border
{
    position: relative; 
    height: 200px; 
        width:  200px; 
        border: 1px solid black;  
        text-align:center;     
}
.border:hover
{
    border: 1px solid red;
}

<强> DEMO

方法 - 2 （为div提供单独的悬停效果）

只需添加display：inline to .meh

即可

.meh
{
    position: relative; 
    opacity:0.5;
    filter:alpha(opacity=40); 
    width: 200px;
    height: 200px; display:inline
}

<强> DEMO

Answer 2

让我试试......

    <style>
    .meh
    {
        z-index: 500;
        width: 200px;
        height: 200px; 
        text-align: center; 
    }
    .meh img {
        margin-top: 50px;
        opacity:0.5;
        filter:alpha(opacity=40); 
    }
    .meh img:hover {
        opacity:1.2;
        filter:alpha(opacity=100); 
    }   
    .border {
        z-index: -1;
        background: transparent;
        position: absolute;
        top: 0;
        height: 200px; 
                width:  200px; 
        border: 1px solid black;  
    }

    .border:hover{
        border: 1px solid green;
    }
        </style>

我不知道这是否是你想要达到的风格。我已经改变了你的css，因为你的方法是在元素图像和div.box上执行“：hover”选择器。我没有真正尝试过同时在css中进行两次徘徊。如果你愿意，我建议你在jquery或javascript上做。

你可以尝试一下并评论你的CSS。

CSS divs重叠

2 个答案: