Ist dies die richtige Methode zum Anwenden von Stilen für Eltern, wenn das Kind fokussiert ist?Anwenden von Stil für das übergeordnete Element, wenn es fokussiert ist
Edit: Mein Problem ist, muss ich diese Stile für kleine Geräte anwenden. Also kann ich Jquery nicht benutzen. Deshalb versuche ich innerhalb der Medienfrage in css.
Zuerst müssen Sie ein tabindex Attribut hinzufügen zu deinen divs, oder sie können nie den Fokus erhalten.
Ich habe auch den Code enthalten, um die CSS-Klasse aus dem übergeordneten entfernen, wenn das Kind den Fokus verliert.
$("#child").focusin(function() {
$(this).parent().addClass("focused");
});
$("#child").blur(function() {
$(this).parent().removeClass("focused");
});.focused {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent" tabindex="-1">
Parent Top
<div id="child" tabindex="-1">
Child
</div>
Parent Bottom
</div>Ich habe die Frage bearbeitet – Shesha
Dies kann nicht in reinem CSS getan werden, bis der ': has' Selektor von allen Browsern unterstützt wird. –
Sie können auch jQuery für diesen Einsatz:
$('#child:focus').parent().addClass('your_class');
Sie tun können, um dieses ganz einfach mit JQuery:
$(document).ready(function(){
if ($(window).width() < 960) {
$('.child input').on('focus', function(){
$('.parent').css({
'background-color': 'blue'
});
});
$('.child input').on('blur', function(){
$('.parent').css({
'background-color': 'lightgrey'
});
});
}
});.parent {
width: 300px;
height: 300px;
display: block;
background: lightgrey;
}
input {
width: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="parent">
<div class="child"><input type="text"></div>
</div>ich bearbeitet haben meine Frage. – Shesha
Sie können angeben, ob die Fensterbreite kleiner als ein Wert ist. Sie können diesen Stil also auf jedem gewünschten Bildschirm anwenden. Ich habe mein Snippet bearbeitet :) –
Dies ist möglich durch 4th Level selecor pseudo-Klasse, die die gleiche wie die jQuery implementation funktioniert.
#parent:has(> #child) { /* styles to apply to the #parent */ }
aber dies ist not currently supported by browsers.
CSS-Selektor nicht für Ebene wählen up ... Sie müssen das Ihr Problem Verwendung JS
lösen, was jquery zu tun hat ist, wird dies scheint, wie Sie eine CSS-Lösung wollen – guradio