Wie wird das aktuelle Element beim Hover mit jQuery ausgewählt, wenn alle Eltern dieselbe Klasse haben?

Ich habe eine jsFiddle erstellt, die ein Problem neu erstellt, das ich mit einem Layout habe, das mit einem Seitenerstellungs-Plugin auf meiner Wordpress-Site erstellt wurde. Es gibt fünf Spalten und alle enthalten ein Fotoalbum, das die gleiche CSS-Klasse hat.Wie wird das aktuelle Element beim Hover mit jQuery ausgewählt, wenn alle Eltern dieselbe Klasse haben?

Wenn ich den Mauszeiger über die Cover des Albums halte, möchte ich, dass ein Child-Div erscheint, wenn man die Opazität wechselt. Wenn ich dies mit ungeordneten Listen mache, habe ich festgestellt, dass die Hover-Pseudoklasse automatisch das richtige Kind auswählt, aber die von mir verwendete jQuery verhält sich anders und wählt alle Elemente mit derselben CSS-Klasse und nicht nur das Kind des Elements aus Ich schwebe rüber.

Gibt es eine Möglichkeit, ich kann es nur auf die div ich schweben über und es Kinder, und nicht alle?

https://jsfiddle.net/25pftxv3/

<div class="column"> 
    <div class="album-cover"> 
     <div class="album-cover-icon"></div> 
    </div> 
</div> 

<div class="column"> 
    <div class="album-cover"> 
     <div class="album-cover-icon"></div> 
    </div> 
</div> 

<div class="column"> 
    <div class="album-cover"> 
     <div class="album-cover-icon"></div> 
    </div> 
</div> 

<div class="column"> 
    <div class="album-cover"> 
     <div class="album-cover-icon"></div> 
    </div> 
</div> 

<div class="column"> 
    <div class="album-cover"> 
     <div class="album-cover-icon"></div> 
    </div> 
</div> 



html, 
body { 
    height:100%; 
} 

.column { 
    position:relative; 
    float:left; 
    width:18%; 
    height:100%; 
    margin:1%; 
    overflow:hidden; 
} 

.album-cover { 
    padding:60px 0 !important; 
    background:pink; 
} 

.album-cover-icon { 
    width:20px; 
    height:20px; 
    margin:0 auto; 
    background:yellow; 
    opacity:0; 
    transition: all .5s; 
} 

.album-cover-icon.hover { 
    opacity:1; 
} 


jQuery(document).ready(function($) {  

$(".album-cover").hover(function() { 
    $(".album-cover-icon").addClass("hover"); 
}, function() { 
    $(".album-cover-icon").removeClass("hover"); 
}); 

});

Quelle

2017-05-19 Jack1991

.album-cover-icon alle .album-cover-icon Elemente zielen.

Sie möchten $(this).find('.album-cover-icon') verwenden, um das Element .album-cover-icon im aktuell deaktivierten Element zu targetieren. ohne JS/jQuery

jQuery(document).ready(function($) { \t 
 

 
$(".album-cover").hover(function() { 
 
    $(this).find(".album-cover-icon").addClass("hover"); 
 
}, function() { 
 
    $(this).find(".album-cover-icon").removeClass("hover"); 
 
}); 
 

 
});

html, 
 
body { 
 
    height:100%; 
 
} 
 
.column { 
 
    position:relative; 
 
    float:left; 
 
    width:18%; 
 
    height:100%; 
 
    margin:1%; 
 
    overflow:hidden; 
 
} 
 

 
.album-cover { 
 
    padding:60px 0 !important; 
 
    background:pink; 
 
} 
 

 
.album-cover-icon { 
 
    width:20px; 
 
    height:20px; 
 
    margin:0 auto; 
 
    background:yellow; 
 
    opacity:0; 
 
    transition: all .5s; 
 
} 
 

 
.album-cover-icon.hover { 
 
    opacity:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div>

Aber FYI, können Sie dies tun. Verwenden Sie einfach :hover für das übergeordnete Element, um auf das untergeordnete Element zu verweisen.

html, 
 
body { 
 
    height:100%; 
 
} 
 
.column { 
 
    position:relative; 
 
    float:left; 
 
    width:18%; 
 
    height:100%; 
 
    margin:1%; 
 
    overflow:hidden; 
 
} 
 

 
.album-cover { 
 
    padding:60px 0 !important; 
 
    background:pink; 
 
} 
 

 
.album-cover-icon { 
 
    width:20px; 
 
    height:20px; 
 
    margin:0 auto; 
 
    background:yellow; 
 
    opacity:0; 
 
    transition: all .5s; 
 
} 
 

 
.album-cover:hover .album-cover-icon { 
 
    opacity:1; 
 
}

<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div>

Quelle

2017-05-19 20:18:50

Nur CSS! Du hast mich auch geschlagen. –

Danke Michael, ich habe dies aufgewertet, es ist eine großartige Antwort. Ich wusste nicht, dass es eine CSS-Lösung gibt. Das einzige Problem ist, dass keiner von ihnen auf meiner Website funktioniert. Hier ist die Seite, auf der ich sie benutzt habe. Kannst du etwas falsch sehen mit dem, was ich getan habe? Die Fotoalben sind ganz unten und der Übersichtlichkeit halber habe ich die Icons nur halb versteckt. Wenn sie sich über ihnen bewegen, sollten sie vollständig undurchsichtig werden - http://www.lucieaverillphotography.co.uk/work-3/ – Jack1991

@ Jack1991 fügen Sie diese '.et_divi_builder #et_builder_outer_content .et_pb_section .et_pb_row .et_pb_column .et_pb_module .album-cover hinzu: hover + .album-cover-icon-wrap, .et_divi_builder #et_builder_outer_content .et_pb_section .et_pb_row .et_pb_column .et_pb_module.Album-Cover-Icon-Wrap: Hover { Opazität: 1; } ' –

Nur $(this) verwenden, um den aktuellen Block zu verweisen auf wird schwebte. Dann .find() benutzen Sie es ein Kinder .album-cover-icon

jQuery(document).ready(function($) { 
 

 
    $(".album-cover").hover(function() { 
 
    $(this).find('.album-cover-icon').addClass("hover"); 
 
    }, function() { 
 
    $(this).find('.album-cover-icon').removeClass("hover"); 
 
    }); 
 

 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.column { 
 
    position: relative; 
 
    float: left; 
 
    width: 18%; 
 
    height: 100%; 
 
    margin: 1%; 
 
    overflow: hidden; 
 
} 
 

 
.album-cover { 
 
    padding: 60px 0 !important; 
 
    background: pink; 
 
} 
 

 
.album-cover-icon { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 0 auto; 
 
    background: yellow; 
 
    opacity: 0; 
 
    transition: all .5s; 
 
} 
 

 
.album-cover-icon.hover { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="album-cover"> 
 
    <div class="album-cover-icon"></div> 
 
    </div> 
 
</div>

Quelle

2017-05-19 20:21:55 StefanBob

Ich übergebe mich der Antwort von Michael Coker, wie es wahr ist, können Sie das einfach mit CSS tun – StefanBob

Dieser kurze davon ist, dass es viele Möglichkeiten gibt. Mein bevorzugter Favorit ist mit dem Kontextparameter des jQuery-Selektor:

$(function(){ 
    $(".album-cover").hover(function() { 
     $(".album-cover-icon", this).addClass("hover"); 
    }, function() { 
     $(".album-cover-icon", this).removeClass("hover"); 
    }); 
});

Es wird nur die Wähler auf Kinder des zweiten Parameters entspricht (in dem obigen Beispiel this).

https://jsfiddle.net/u0Lrutrf/

Quelle

2017-05-19 20:23:49

Wie wird das aktuelle Element beim Hover mit jQuery ausgewählt, wenn alle Eltern dieselbe Klasse haben?

Antwort

Verwandte Themen