1

最初は本文のテキストを非表示にしたいのですが、子 div の要素にカーソルを合わせると表示されます。したがって、この場合、最初は両方とも最初はdisplay: none「H」にカーソルを合わせると、「テキスト A」が表示されるようにしたいと考えています。文字「E」にカーソルを合わせると、「テキスト B」が表示されます。#content 要素を #word 要素の中に入れたくありません。それらを別々のdivとして保持したい。

何か案は？

(以下のフィドルを参照)

HTML:

<div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a id="e" class= "letter" href=#>E</a></h1>
    <h1><a id="l" class= "letter" href=#>L</a></h1>
    <h1><a id="l2"class= "letter" href=#>L</a></h1>
    <h1><a id="o" class= "letter" href=#>O</a></h1> 
</div>

<div id="content">
    <div id="textA">Text A</div>
    <div id="textB">Text B</div>
</div>

CSS:

 body {
    font-family: 'Chango', cursive;
    font-size: 115px;
    color: white;
    text-shadow: 5px 5px 5px #000;

    width: 100%;
    height: 100%;
    margin: 0px;
    background: black;
    }

    #name {
    position:absolute; 
    height:100%; 
    width: 70%;
    display: table;
    padding: 0 15% 0 15%;
    background: black;
    }

    h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 1em;

    }

    a {
    /*border: 1px solid black;*/
    display: inline-block;
    line-height: 89%;
    overflow: hidden;

    }

    a:visited, a:active {
    text-decoration: none;
    color: white;
    /*color: #E8E8E8;*/

    }

    a:link {
    text-decoration: none;
    color: white;
    text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;

    }

    a:hover {
    text-shadow: 5px 5px 5px #000;
    color: white;
    }

フィドル: http://jsfiddle.net/ADfhj/1/

PS-次のCSSを試してみましたが、役に立ちませんでした:

#textA {
display: none;
}

#word:hover #textA {
display: block;
}
4

1 に答える 1

6

css だけで実現する方法はありません。ただし、単純な javascript/jquery を試すことはできます。

 $('.letter').mouseover(function(){
    var cont = $(this).attr('id');
    $('#content>div').hide();
    $('#text_'+cont).fadeIn();
});

フィドルをチェック

于 2013-09-09T03:48:31.380 に答える