Öğe üzerine gelin ve aynı sınıftaki tüm öğeleri vurgulayın

Bir web sayfasında aynı sınıfta birçok öğe var. Bunlardan birini tuttuğumda tüm bu unsurları vurgulamak istiyorum. Bunu CSS'de nasıl yapabilirim?Öğe üzerine gelin ve aynı sınıftaki tüm öğeleri vurgulayın

p.un:hover { background-color:yellow;}

Ve HTML'imi:

Şu anda, bu CSS var

.classname:hover ~ .classname { 
    background-color: yellow; 
}

Ama bu:

<div class="book"> 
    <div class="page left"> 
    <p class="un">Karen…</p> 
    </div> 
    <div class="page right"> 
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p> 
    </div>

kaynak

2012-10-08 Justin D.

.. –

CSS ağırlıklı bir ebeveyn olduğunu. Kardeş seçmenler var (http://css-tricks.com/child-and-sibling-selectors/) ancak bu sadece elemanlar aynı seviyede çalışıyorsa, kurulumunuzu görmeliyiz. – TheZ

Yuvalanmış paragraf etiketleri, bu kurulumda yalnızca CSS ile birbirini tetikleyemez. Bu javascript gerektirir. – TheZ

saf CSS kullanarak yapabileceği en iyi budur sadecesınıfından sonra tüm kardeşleri'dan sonra vurgular. e gezinen öğe.

Tüm öğeleri vurgulamak için JavaScript kullanmalısınız;

var elms = document.getElementsByClassName("classname"); 
var n = elms.length; 
function changeColor(color) { 
    for(var i = 0; i < n; i ++) { 
     elms[i].style.backgroundColor = color; 
    } 
} 
for(var i = 0; i < n; i ++) { 
    elms[i].onmouseover = function() { 
     changeColor("yellow"); 
    }; 
    elms[i].onmouseout = function() { 
     changeColor("white"); 
    }; 
}

Birden sınıfları var ve bu genelleme istiyorsanız, böyle bir şey kullanın:

var classes = ["one", "two", "three"]; //list of your classes 
var elms = {}; 
var n = {}, nclasses = classes.length; 
function changeColor(classname, color) { 
    var curN = n[classname]; 
    for(var i = 0; i < curN; i ++) { 
     elms[classname][i].style.backgroundColor = color; 
    } 
} 
for(var k = 0; k < nclasses; k ++) { 
    var curClass = classes[k]; 
    elms[curClass] = document.getElementsByClassName(curClass); 
    n[curClass] = elms[curClass].length; 
    var curN = n[curClass]; 
    for(var i = 0; i < curN; i ++) { 
     elms[curClass][i].onmouseover = function() { 
      changeColor(this.className, "yellow"); 
     }; 
     elms[curClass][i].onmouseout = function() { 
      changeColor(this.className, "white"); 
     }; 
    } 
};

kaynak

2012-10-08 17:49:09 Chris

Konu seçicisi devreye girdiğinde ne kadar insanın ağızlarında köpüreceğini düşünün: '! .classname ~ .classname: hover,. classname: hover ~ .classname' - iyi, belki de hiç değil. – BoltClock

Çalışmıyor. Kodunuzu bir kod etiketine koydum: ' '. –

Bu kurulumla CSS kullanmam gerekir mi? –

Teşekkür Chris cevaba. İşi yapan basit bir işlev yazmak için onun kodunu kullandım. Fonksiyonu <head></head>'a yerleştirebilirsiniz, ancak sayfa yüklendiğinde, yani vücudun sonundaki yeri çağırmanız gerekir. colorout background-color olduğu

fonksiyonu: belki

hoverByClass("un","yellow"); 
hoverByClass("un2","pink");

Ben soru eski olduğunu biliyorum ama başka o yardım birisi :)

function hoverByClass(classname,colorover,colorout="transparent"){ 
    var elms=document.getElementsByClassName(classname); 
    for(var i=0;i<elms.length;i++){ 
     elms[i].onmouseover = function(){ 
      for(var k=0;k<elms.length;k++){ 
       elms[k].style.backgroundColor="orange";//colorover; 
      } 
     }; 
     elms[i].onmouseout = function(){ 
      for(var k=0;k<elms.length;k++){ 
       elms[k].style.backgroundColor=colorout; 
      } 
     }; 
    } 
}

ve bunun gibi işlev çağrısı

burada deneyin:

function hoverByClass(classname,colorover,colorout="transparent"){ 
 
\t var elms=document.getElementsByClassName(classname); 
 
\t for(var i=0;i<elms.length;i++){ 
 
\t \t elms[i].onmouseover = function(){ 
 
\t \t \t for(var k=0;k<elms.length;k++){ 
 
\t \t \t \t elms[k].style.backgroundColor=colorover; 
 
\t \t \t } 
 
\t \t }; 
 
\t \t elms[i].onmouseout = function(){ 
 
\t \t \t for(var k=0;k<elms.length;k++){ 
 
\t \t \t \t elms[k].style.backgroundColor=colorout; 
 
\t \t \t } 
 
\t \t }; 
 
\t } 
 
} 
 
hoverByClass("un","yellow"); 
 
hoverByClass("un2","pink");

<div class="book"> 
 
    <div class="page left"> 
 
    <p class="un">Karen…</p><p class="un2">Karen2…</p> 
 
    </div> 
 
    <div class="page right"> 
 
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p><p class="un2">Karen2 ne se retourne pas. Mme Tilford2 reste là, apparemment confuse et abattue.</p> 
 
    </div> 
 
</div>

> Çocuk ilişkisi - Sen javascript kullanmanız gerekecektir

kaynak

2016-07-21 10:18:54 WuerfelDev

Öğe üzerine gelin ve aynı sınıftaki tüm öğeleri vurgulayın

cevap

İlgili konular