-1

嘿伙计们，我得到了一个半淡出的图像，当你将鼠标悬停在它上面时，它会淡入屏幕。我也有一个我制作的盒子，所以当你将鼠标悬停在上面时，它会改变颜色。然而问题是，如果我让盒子绕着图像转，唯一有效的就是盒子改变颜色，所以它与另一个图像重叠。有任何解决这个问题的方法吗？

    <!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>
4

2 回答 2

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;
}​

演示

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

只需添加 display:inline 到.meh

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

演示

于 2012-12-03T07:01:27.050 回答
0

让我试试...

    <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 上执行“：悬停”选择器。我还没有真正尝试过同时在 css 中执行两个悬停。如果您愿意，我建议您在 jquery 或 javascript 上执行此操作。

你可以试试这个并评论你的CSS。

于 2012-12-03T02:39:17.627 回答