0

いくつかの div [最大 10] が必要です。そのうちの 1 つを自動的に追加して、特定の要素がホバーしたときに表示したいのですが、それらすべてを 1 つずつ要素に追加して、すべてを 1 つずつ非表示にすることはできないと思いますを使用して再度表示します:hover

例：

<div class="info1">extra info1</div> <!-- Hidden by deffult -->
<div class="info2">extra info2</div> <!-- Hidden by deffult -->
<div class="info3">extra info3</div> <!-- Hidden by deffult -->
<div class="info4">extra info4</div> <!-- Hidden by deffult -->

<div class="bla">I want info #1</div>
<br />
<div class="bla">I want info #2</div>
<br />
<div class="bla hovered">I want info #3</div> <div class="info3">extra info3</div> <!-- there wasn't info3, but its appeared because of the hovering -->
<br />
<div class="bla">I want info #4</div>
<br />

これを[ここ]で作成したときに失敗しました。これはcssの助けが必要ないためですextra span. ）。

onmouseover="this.className='失敗した試みなどで試した方が良いと思いますが、.appendToそれらを一緒に使用する正しい方法がわかりません。

アイデアや提案はありますか?

更新: 皆さん、.:hoverのspan中にdiv. しかし、もっと柔軟でプロフェッショナルなソリューションが必要です。

4

2 に答える 2

1

各 div にスパンを追加して開始します。それらを非表示にするCSSは次のとおりです。

`div.bla>span {display:none}`

jquery の場合:

$('div.bla').hover(function() {
  $('span', this).show();
}, function() {
  $('span', this).hide();
});

または、javascript を使用せずに html と css を介してこれを行うこともできますが、div をハイパーリンクに変更することをお勧めしますが、必須ではありません。

http://jsfiddle.net/lucuma/ujQ5B/

<a class="blah">link<span>something</span></a>

<div class="blah">link<span>something</span></div>



a.blah>span {display:none}
a.blah:hover>span {display:inline}

div.blah>span {display:none}
div.blah:hover>span {display:inline}
于 2013-04-06T16:03:58.147 に答える
0

スパンを div に追加します。

<div class="bla">I want info #1<span class="info">extra info</span></div>
<div class="bla">I want info #2<span class="info">extra info</span></div>
<div class="bla">I want info #3<span class="info">extra info</span></div>
<div class="bla">I want info #4<span class="info">extra info</span></div>

そしてCSSはそれを行います:

.info {display: none;}
.bla:hover .info {display: inline}

フィドル

編集：

インデックスを使用して正しい要素をターゲットにする JavaScript 関数は、おそらく次のような方法です。

$(function() {
    var elems = $('[class^="info"]').hide().css({
        position: 'absolute',
        top: 0, 
        left: 0,
        height: 30,
        width: 100
    });

    $('.bla').on('mouseenter mouseleave', function(e) {
        var i = $(this).index('.bla');
        elems.eq(i).toggle(e.type=='mouseenter');
    });
});

フィドル

于 2013-04-06T16:07:28.170 に答える