CSS

Question

ile örtüşen elemanların üzerine gelindiğinde stilin durgun durum durumu Birkaç div içeren bir DOM yapısına sahibim. Görsel olarak, bu Div'lerin bir kısmı diğerlerinin çocuklarıdır, ancak DOM Yapısında bunların hepsi kardeştir.

"Ebeveyn" divs'larının vurgulu durumunu, "alt" div'leri üzerinde gezindiğinde bile kullanmam gerekir.

Javscript olmadan bunu yapmanın bir yolu var mı? Belki de başka bir divun içinde olduklarını bilmek için divların mevcut pozisyonunu kullanarak?

---

Güncelleme

---

sorun veliler aslında kardeşiz olduğunu. Sadece bir konteyner var ve 8 çocuk divs diyelim. 2 büyük div'lardır ve diğer altı, her büyük div içinde 3 gösterilir. şöyle birşey:

http://jsfiddle.net/XazKw/12/

rengini değiştirmek gerekir Vurgulanan çocukları çevreleyen Sadece ebeveyn.

DOM yapısını BTW değiştiremiyorum.

#container:hover .parent { /* Hover styles applied */ } 

beğendiniz: gibi bir şey tek bir konteyner ile tüm unsurları çevreleyen ve sonra yapmayı

Answer 1

Nasıl stil bir DOM kardeş vurgulu üzerine yürürlüğe girerse http://jsfiddle.net/Wexcode/XazKw/

Answer 2

, sadece gerektiği

.parent:hover ~ .child { /* styling */ } 

Answer 3

sadece CSS ile bunu yapmanın bir temiz (hatta hacky) yolu düşünemiyorum: kardeş seçici kullanabilecektir. Başka bir şey anlamazsanız, bir Javascript yöntemi. Sadece body numaralı telefondan mousemove kodunu al.

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

Demo: http://jsfiddle.net/ThinkingStiff/UhE2C/

HTML:

<div id="parent"></div> 
<div id="overlap"></div> 

CSS:

#parent { 
    border: 1px solid red; 
    height: 100px; 
    left: 50px; 
    position: relative; 
    top: 50px; 
    width: 100px; 
} 

#overlap { 
    background-color: blue; 
    border: 1px solid blue; 
    height: 100px; 
    left: 115px; 
    position: absolute; 
    top: 130px; 
    width: 100px; 
    z-index: 1; 
} 

Senaryo:

document.body.addEventListener('mousemove', function (event) { 

    if(isOver(document.getElementById('parent'), event)) { 
     document.getElementById('parent').innerHTML = 'is over!';   
    } else { 
     document.getElementById('parent').innerHTML = ''; 
    }; 

}, false);   

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

Answer 4

Hayır, ebeveynleri veya önceki kardeşleri tek başına CSS'den etkileyemezsiniz. Sadece size yardımcı olmayan kardeşleri takip ediyorum.

Başka biri :parent sözde sınıf ister mi?

Answer 5

Yapılması mümkün olmayan (genellikle) yapılabilir. En basit çözüm DOM'yi yeniden tanımlamak ve komşu kardeş seçimini kullanmak olsa da, başka bir yol vardır, yani daha karmaşık b) modern bir tarayıcı gerektirir.

Üst öğe üzerinde vurgulu bir efekti gerçekleştirmek için sözde öğeleri kullanabilirsiniz.Sözü edilen sözdizimi, bu durumda yalnızca ebeveynin - .child vurgulu olduğunda görünür olacak ve .parent'u .parent telafi etmek için, üst değiştirilen duruma benzeyen .parent telafi etmek için kesinlikle konumlandırılacaktır.

Fiddle here.