Alter sınıf gezinip kardeşler ilk çocuk

ben olduğunu varsayalım: block-two ilk çocuğu süpürdü edilirkenAlter sınıf gezinip kardeşler ilk çocuk

<div class="block-one"></div> 
<div class="block-two"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

Ben block-one css değiştirmek istiyorum. Bu SASS/SCSS ile nasıl yapılabilir? ,

.block-two { 
    div:first-child:hover { 
    } 
}

vurgulu ile çalışmak için bir şey elde edemez at-root + & &, @ denedi: Ben çalıştılar.

kaynak

2016-03-30 ThingWings

Bunun için javascript kullanmanız gerekecek. CSS veya SASS yalnızca, gezdirdiğiniz öğenin çocuklarının CSS'lerini değiştirmenize izin verir. – HTMLNoob

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector ve http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling- için olası kopyalar css-selector – Stickers

Bu kolayca jQuery ile yapılabilir: CSS seçim ağacında yukarıdaki görmesine izin vermez çünkü

Maalesef

$(".block-two").hover(
    function() { 
    //Mouse is over the element 
    $(".block-one").css({"background-color": "#333"}); 
    }, 
    function() { 
    //Mouse left the element 
    $(".block-one").css({"background-color": "#fff"}); 
    } 
);

kaynak

2016-03-30 20:42:01 Axel

hey Axel, bir fare out olay işleyicisine gerek yok, varsayılan davranışı CSS ile belirtebilirsiniz ve javascript sadece değiştirilen davranışı sadece hover üzerine uygulayacaktır ... tıpkı CSS'de yaptığınız gibi – AGE

Tamam ama bunu – Axel

gibi yeterince yapıyorum heheh yeterince adil – AGE

derler ama ebeveynin kardeş seçerek bakış CSS açıdan mümkün değildir etmek bu şekilde. JavaScript/jQuery ancak burada ve şu anda en iyi yaklaşım olduğunu kullanma

bir örnek:

$(".block-two > :first-child").hover(function(){ 
    $(".block-one").css("color", "red"); 
});

bu yaklaşıma net olmak gerekirse, bunu gerçekleştirmek için mümkün olmayacaktır çünkü güvenmek Tamam Sadece CSS ile istenen etki.

kaynak

2016-03-30 20:42:02 AGE

İlk çocuğa blok-iki bloğu koyarsam ne olur? Sonra ikinci çocuğu hedeflemek için blok-iki: nth-child (2) hedeflerim. O zaman değiştirebilir miyim? – ThingWings

@ThingWings ** [komşu kardeş seçimi] 'ni (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors) ** '+' kullanarak kullanabileceksiniz. Bu: '.block-two>: first-child: hover + .block-two> nth-child (2)' ilk çocuğunuzda gezinip ikinci çocuğu değiştirmek istediğinizi varsayalım. Buradaki nokta, çocuğun seçilen çocuktan hemen sonra, – AGE

'dan önce gelmesi gerektiğidir. Çocuk (2) tutulması gereken ve ilk çocuk – ThingWings

Alter sınıf gezinip kardeşler ilk çocuk

cevap

İlgili konular