Добавить CSS подкласс с JQuery addclass

Я пытаюсь добавить подкласс класса, используя JQuery, мой CSS выглядит следующим образом:Добавить CSS подкласс с JQuery addclass

.block:nth-child(7) .permahover { 
    top: 0 !important; 
    left: 0 !important; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -webkit-transform: translate(0, 0) !important; 
     -ms-transform: translate(0, 0) !important; 
      transform: translate(0, 0) !important 
}

В то время как это код JS для справки:

$(".block:nth-child(7)").mouseenter(function() { 
    $(".block:nth-child(7)").addClass("permahover"); 
});

Если я удалю «.block: nth-child (7)» в имени класса, поэтому он выглядит так же, как «.permahover», все идет, но мне нужно, чтобы это был подкласс. Я попытался заменить в javascript «.addClass (« permahover »)« с ».addClass (« block: nth-child (7) .permahover »), но, как и ожидалось, это не сработало. Есть ли способ решить это, а если нет, любое обходное решение (даже если это требует от меня не использовать jQuery)?

источник

2016-01-30 Alex Massa

Вы знаете, что CSS не соответствует javascript? В CSS пространство перед последним классом означает что-то – adeneo

Также внутри функции вы можете просто использовать '$ (this) .addClass (« permahover »);' как вы меняете элемент, событие находится на – Rhumborl

Вы не можете добавить псевдокласс к элементу DOM. Если вы подумаете об этом, вы поймете, что это будет невозможно добавить :nth-child(7) класс к элементу, который НЕ является седьмым потомком своего родителя.

Но для вашей проблемы вы dont't даже это нужно, нужно просто удалить пространство из перед тем .permahover

.block:nth-child(7).permahover { 
    top: 0 !important; 
    left: 0 !important; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -webkit-transform: translate(0, 0) !important; 
     -ms-transform: translate(0, 0) !important; 
      transform: translate(0, 0) !important 
}

Если вы оставите место там, ваше правило CSS будет соответствовать дочернему элементу с классом permahover внутри вашего 7-го .block.

<div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block permahover"></div> <!-- .block:nth-child(7).permahover { ... } --> 
</div> 

<div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"> 
     <div class="permahover"></div> <!-- .block:nth-child(7) .permahover { ... } --> 
    </div> 
</div>

А также не дублировать jQuery запрос:

$(".block:nth-child(7)").mouseenter(function() { 
    $(this).addClass("permahover"); 
});

Или, если вы хотите добавить .permahover класс дочернего элемента, вы можете сделать это:

$(".block:nth-child(7)").mouseenter(function() { 
    $(" > *", this).addClass("permahover"); 
});

источник

2016-01-30 22:25:23 Adam

Извините, что я haven Я указал, что элемент, с которым я пытался работать, был 7-м ребенком, а HTML очень похож на тот, который вы написали. В любом случае, удаление пространства отлично работало. Не мог себе представить, что это было именно так! Большое спасибо. –

В вашем правиле CSS указан класс .block, который является 7-м дочерним, который имеет дочерний элемент с классом .permahover. То, что я думаю, что вы хотите:

.block:nth-child(7).permahover { ... }

Это определяет элемент с обеими .block и .permahover классов, что является седьмым ребенком.

источник

2016-01-30 22:26:14 tvanfosson

ответ

Смежные вопросы