0 
<center>
    <div class="trivlimp">
        <center><div class="lyrics"><!-- |field_1| --></div></center>
    </div>

    <div class="imp">
        <div class="trgls"><!-- |points| --> Gallons</div><br>
        <div class="trals"><!== |field_2| --></div><br>
        <div class="trpc"><!-- |posts| --> posts</div><br>
        <div class="trttr"><!-- |field_3| --></div><br>
    </div>
</center>

div "trivlimp"にカーソルを合わせて、div"imp"を"trivlimp"の真上に表示できるようにしたいと思います。div「imp」の下に最初のdivを非表示にします。私は：hoverでこれを試してみましたが、完全に失敗し、自分自身にとってより苛立たしいものになってしまいました。私はJqueryの使用に反対していませんが、これを完全にcssで実行したいと思います。しかし、jqueryを使用する方が簡単な場合は、それを使用します。

4

4 に答える 4

1

あなたの質問をよく理解していませんが、次を使用できます。

.imp {
    display: none;
}

.trivlimp:hover + .imp {
    display: block;
}
于 2013-01-01T03:27:51.903 に答える
1

http://jsfiddle.net/Thrw2/3/

htmlコード

<center>
<div class="trivlimp">
    <center><div class="lyrics"> |field_1| </div></center>
</div>

<div class="imp">
    <div class="trgls"> |points|  Gallons</div><br>
    <div class="trals">|field_2| </div><br>
    <div class="trpc"> |posts|  posts</div><br>
    <div class="trttr">|field_3|</div><br>
</div>

CSSコード

.trivlimp {     background-color:#FF0000;
    width: 260px;
    height: 400px;
    text-align: center;
    position: absolute; }
.imp {     width: 260px;
    height: 400px;
    background-color:#676767;
    display: none;
    position: absolute;
    top: 0; }

.lyrics {
    margin-top: 50%;
    background-color: #CC0066;
    width: 180px;
    padding: 5px;
    height: 130px
    overflow: auto;
    text-align: justify;
    text-transform: uppercase;
    font-family: Georgia;
    font-style: italic;
    font-size: 10px;
    line-height: 10px;
}

.trgls {
    width: 190px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    float: right;
    margin-right: 35px;
    background-color:#6666FF;
    text-transform: uppercase;
}

.trals {
    width: 170px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    float: right;
    margin-right: 35px;
    background-color: #00FF00;
    text-transform: uppercase;
}

.trpc {
    width: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    float: right;
    margin-right: 35px;
    background-color: #FFCC00;
    text-transform: uppercase;
}

.trttr {
    width: 130px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    float: right;
    margin-right: 35px;
    background-color: #009900;
    text-transform: uppercase;
}

jquery

$(function(){
$('.trivlimp').hover(function() {
    $('.imp').show();
},
function() {
    $('.imp').hide();
});
});
于 2013-01-01T03:03:52.417 に答える
0

jQuery を使用して、ホバー状態を操作します。私も質問に従っていません。だから私はあなたのコードを JSFiddle に入れ、あなたが探しているものに沿って私が考えていたものを作り上げました。jQueryのマウスオーバー/マウスアウトを使用しました：

$('.trivlimp').mouseover(function() {
    $('.imp').show();
});

$('.trivlimp').mouseout(function() {
    $('.imp').hide();
});

http://jsfiddle.net/arsCr/

于 2013-01-01T01:47:58.140 に答える
0

次のようにします: http://jsfiddle.net/chanckjh/PWtTw/ html:

<div class="trivlimp">
</div>

<div class="imp">
</div>​

CSS:

.trivlimp{
    border: 1px solid red;
    width: 500px;
    height: 300px;
}

.imp{
    border: 1px solid blue;
    width: 500px;
    height: 300px;
    background: blue;
    display: none;
}

jquery:

$(function() {
    $('.trivlimp').hover(function() {
        $('.imp').show();
    }, function() {
        $('.imp').hide();
    });
});​
于 2013-01-01T02:02:06.380 に答える