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

これがあなたが達成しようとしているスタイルであるかどうかはわかりません。あなたのアプローチは要素imageとdiv.boxで「：hover」セレクターを実行することなので、私はあなたのcssを変更しました。私は実際にcssで2つのホバーを同時に実行しようとはしていません。必要に応じて、jqueryまたはjavascriptで実行することをお勧めします。

これを試して、CSSにコメントすることができます。

于 2012-12-03T02:39:17.627 に答える