0

ページにテキストがあり、誰かがその上にマウスを置くと、同じページで選択されたいくつかの画像が (アウトラインを使用して) ハイライト表示されます。これを一方向にしたいので、テキストにマウスを合わせると画像が強調表示されますが、画像にマウスを合わせても効果がないようにしたいのですが、今はすべてを強調表示します。これは可能ですか？注: 各画像には ID とクラス (jquery ドラッグ可能) が既に関連付けられています。

HTML:

<div class="container">
    <div class="containerLeft">alignments</div>
    <div><img src="http://www.cool-smileys.com/images/out11.jpg" id="position7" class="ui-widget-content" /></div>
    <div><img src="http://www.cool-smileys.com/images/out12.jpg" id="position8" class="ui-widget-content" /></div>
    <div><img src="http://www.cool-smileys.com/images/out13.jpg" id="position9" class="ui-widget-content" /></div>
    <div> <img src="http://www.cool-smileys.com/images/out14.jpg" id="position12" class="ui-widget-content" /> </div>
</div>

CSS:

/* Normal Styles */
.containerLeft {
    color:#333;
    width:100px;
}

.containerLeft:hover {
    width:100px;
}


/* Hover Styles */
.container:hover .containerLeft {
    background-color: none;
}


.container:hover #position12 {
    outline:2px solid #CFF;
}

.container:hover #position7 {
    outline:2px solid #CFF;
}

.container:hover #position8 {
    outline:2px solid #CFF;     
}

.container:hover #position9 {
    outline:2px solid #CFF;
}


  #position7{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 13em;
    top:9em;
    z-index:17;
 }

   #position8{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 4em;
    top:15em;
    z-index:2;
 }


    #position9{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 7em;
    top:5em;
    z-index:20;
 }

 #position12{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 24em;
    top:10em;
    z-index:-14;
 }

現在、すべてが css になっていますが、javascript による解決策はありますか?

jsfiddle: http://jsfiddle.net/tMzMN/8/

4

1 に答える 1

1

JS/Jquery を使用する場合は、次の方法で目的を達成できます。

$(".containerLeft").hover(function() {
    $(".ui-widget-content").addClass("hover_class");
}, function() {
    $(".ui-widget-content").removeClass("hover_class")
});

次に、次のような 4 つの CSS セレクターをすべて置き換えるだけです。

.container:hover #position9 {
    outline:2px solid #CFF;
}
...

これとともに：

.hover_class {
    outline:2px solid #CFF;
}

これが実際のフィドルです：http://jsfiddle.net/tMzMN/9/

また、これについて私を引用しないでください。上記の Jquery メソッドを使用すると、CSS トリックを見つけるよりも、古いブラウザーとの後方互換性が向上する可能性があります。私は間違っている可能性があり、IE <9でうまくいくものがあるかもしれませんが、よくわかりません...

于 2013-08-21T23:11:09.743 に答える