jQuery hover, tiefste Element markieren

[hoctar]

Hallo
wenn ich mit der Maus über ein Element gehe, werden alle Parent Elemente markiert.
Markiert werden soll aber nur das Element, auf dem die Maus sich gerade befindet.

        $('#wrap').find('*').hover(function() {
                $(this).css('border', '1px solid red');
        }, function() {
                $(this).css('border', 'none');
        });

<div id="wrap">
    <div id="div1">DIV1</div>
    <div id="div2">
          DIV2
          <span id="span1">SPAN1</span>
          <div id="div3">DIV3</div>  
    </div>
    <div id="div4">
          DIV4
          <span id="span2">SPAN2</span>     
     </div>
</div>

Mir ist bewust das sich die Maus, wenn sie auf SPAN1 sich befinden, immer noch auch auf DIV2 ist und deswegen auch DIV2 markiert wird. Wie kann man dies aber umgehen ? Wenn der Mauszeiger auf SPAN1 zeigt, soll auch nur SPAN1 rot umrandet sein.

 

[Maik]

Hi,

tausch den Universalselektor *, der alle enthaltenden HTML-Elemente einbezieht, gegen das span-Element aus:

$('#wrap').find('span').hover(function() {

Übrigens hast du <span id="span2"> nicht ordnungsgemäß mit dem </span>, sondern einem </div>-Tag geschlossen.

mfg Maik

 

[CPoly]

Oder sowas in der Art

$('#wrap').find('*').hover(function() {
                 if($(this).find(":hover").length > 0)//prüfen ob es unterhalb des Elementes ein weiteres Element gibt, welche gehovert ist.
                        return false;
                $(this).css('border', '1px solid red');
        }, function() {
                if($(this).find(":hover").length > 0)//prüfen ob es unterhalb des Elementes ein weiteres Element gibt, welche gehovert ist.
                        return false;
                $(this).css('border', 'none');
        });

 

[hoctar]

Hallo Maik
das Resultat bleibt leider das gleiche. Das Parent Element wird immer mit markiert.
Das liegt natürlich daran, dass die Maus den Parent garnicht verlässt. Die Maus befindet sich immer noch im Parent aber auch im Child.

 

[Maik]

das Resultat bleibt leider das gleiche. Das Parent Element wird immer mit markiert.

Bei mir erscheint der Rahmen, wie gewünscht, lediglich um das <span>-Element.

Lasst Bilder sprechen



mfg Maik

 

[hoctar]

Hallo CPoly
jetzt wird das letzte Child Element markiert, aber wenn ich nun mit der Maus auf ein Container gehe der Children hat, wird dieser nicht markiert. Also ich gehe nicht direkt auf das Child, sondern auf das Parent Elemnet.

@Maik "Lasst Bilder sprechen" stimmt
Es werden noch andere Elemente vorkommen, also nicht nur das span. Deswegen habe ich '*' benutzt.

 

[hoctar]

Ich habe nun das unten stehende versucht. Leider wird jetzt immer beim verlassen des Elementes (also z.B. Maus von LI nach UL) das betretende Element (hier UL) nicht markiert.

<div id="wrap">
                        
    <div id="block">
                                <ul>
                                        <li>li1</li>
                                        <li>li2</li>
                                        <li>li3</li>
                                </ul>
    </div>

</div>

        var lastEntered;

        $('#wrap').find('*').mouseenter(function() {

                if(lastEntered) {
                        $(lastEntered).css('border', lastEntered.defaultBorder);
                }

                this.defaultBorder = $(this).css('border');
                lastEntered = this;

                $(this).css('border', '1px solid red');

        });