1

ホバーされたテキストが黒でラベル付けされるハイライト効果を作成しようとしています。HTML の構造では、このコンテンツは右側にフローティングします。

http://jsfiddle.net/6hj5D/

div問題は、タグの領域全体ではなく、WORD のみを強調表示したいことです。何か案は？

4

4 に答える 4

2

簡単な解決策は、テキストコンテンツを追加の要素でラップし、それに背景色属性を追加することです。たとえば、<span>要素。

<div id="item 4" class="command"><span>item 4</span></div>

その場合、jQueryコードは次のようになります-

$('.command').hover(function() {
    $(this).find('span').addClass("select");
    },function() {
    $(this).find('span').removeClass("select");
});

または、ホバーイベントを内部に追加することもできます<span>-

$('.command > span').hover(function() {
    $(this).addClass("select");
    },function() {
    $(this).removeClass("select");
});

作業デモ

于 2012-08-19T14:02:39.093 に答える
1

「単語」とは、 （個々の単語ではなく）テキストの背景に色を付けることを意味すると仮定すると、ホバーした.command要素の内容spanをselectクラス名でラップすることにより、次の目的を達成する必要があります。

$('.command').hover(function() {
    $(this).html(
        function(i,h){
            return '<span class="select">' + h + '</span>';
        });
}, function() {
    $(this).closest('.command').find('span').contents().unwrap();
});​

JSフィドルデモ。

Lixがコメントで正しく指摘しているように、このソリューションでは、ホバーされた要素のすべてのコンテンツがspan（ブロックレベルの要素が含まれている可能性がある場合は、おそらくdivより良い）でラップされることを覚えておくことが重要です。選択）そして、mouseleave これで要素から含まれているすべてのスパンを削除します。これらのコメントは正確です。mouseenter具体的に、より具体的にするために、上記を次のように修正しmouseleaveます。

$('.command').hover(function() {
    $(this).html(
        function(i,h){
            return '<div class="select">' + h + '</div>';
        });
}, function() {
    $(this).closest('.command').find('div.select').contents().unwrap();
});​

JSフィドルデモ。

この後者の提案により、テキストのみを強調表示するためにCSSを修正しました（div動作が）とは異なるためspan、次のようになります。

.select {
    background: #000;
    color: #FFF;
    white-space: pre;
    padding: 0;
    display: inline;
}
于 2012-08-19T14:30:16.573 に答える
0

.select クラスを次のように変更します。

.select{ color:red; white-space:pre}

背景色が削除されました (元の .select から)。color プロパティは、ハイライト カラーとして必要な任意の色にすることができます。

CSS の詳細については、https ://developer.mozilla.org/en-US/docs/CSS/CSS_Reference をご覧ください。

于 2012-08-19T14:02:27.237 に答える
0

JSは必要ありません。これを変更/追加するだけですCSS：

.command{
   margin-left:50%;
   display:inline;
}
.command:hover{
    background:#000;
    color:#FFF;
}
于 2012-08-19T16:37:03.410 に答える