Как использовать чистый CSS для управления другими элементами под одним родителем?

вот простой пример из codepen Codepen Как использовать чистый CSS для управления другими элементами под одним родителем?

Я пытаюсь сделать несколько области, которые принадлежат одному и тому же родительскому элементу,
и когда я парить один из них, непрозрачности остальных будет уменьшаться, или что-то иначе стиль меняется.

Например, когда я нахожу второй элемент, первый элемент, который имеет один и тот же родитель, изменит его background-color.

Я использую слово области в первом абзаце означает, что ребенок на самом деле не должен быть div, это может быть li или p или другими элементами.
, чтобы решить эту проблему, это может быть любой элемент.

HTML выглядит следующим образом:

<!-- html --> 
<div class="parent"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    <div class="four"></div> 
</div>

Я попытался E ~ F правило, чтобы решить эту проблему, и я уже знал, что это будет работать только на первом div, который является первым ребенком родителя.

кроме javascript, есть ли другой способ сделать эту функцию с чистым css?
ТНХ

источник

2016-04-14 FlyC

и хочет изменить CSS всех других элементов, кроме парил once..or предыдущего только? –

Вы можете использовать селектор братьев и сестер «+», для справки: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/ –

Вы можете выбрать предыдущий элемент с помощью CSS. Для этого вам придется использовать Javascript. Другой вариант, который вы можете рассмотреть, заключается в их позиционировании, а затем с использованием правила наведения –

При наведении .parent, изменить стиль всех детей, которые не колебались, а также (pen):

.parent { 
    width: 100px; /** limit the width of the parent, so you can't hover it, without hovering one of the children as well **/ 
    margin:10px; 

    &:hover > div:not(:hover) { /** only change the background of divs you don't hover as well **/ 
    background: red; 
    } 

    div{ 
    width:100px; 
    height:100px; 
    border:1px solid black; 
    } 
}

источник

2016-04-14 07:44:51

Вот чего я хочу! большое спасибо ! – FlyC

Я предполагаю, что вы можете использовать 'display: inline-block' для родителя вместо того, чтобы давать ему определенную ширину (ширина становится основанной на дочерних элементах). – Aziz

Действительно. Это была моя первоначальная идея. Тем не менее, я не совсем понял ваш общий макет. Вы также можете использовать положение: абсолютное, по тем же причинам. –

Вы создаете, что, применяя двойные состояния при наведении курсора:

.parent:hover div { 
 
    opacity:0.5; 
 
} 
 

 
.parent:hover div:hover { 
 
    opacity:1; 
 
} 
 

 
.parent div { 
 
    border:1px dashed #CCC; 
 
    padding:1em; 
 
    margin:1em; 
 
    background:#666; 
 
    color:#FFF; 
 
}

<div class="parent"> 
 
    <div class="one">One</div> 
 
    <div class="two">Two</div> 
 
    <div class="three">Three</div> 
 
    <div class="four">Four</div> 
 
</div>

источник

2016-04-14 07:16:50 Aziz

это близко, если непрозрачность не уменьшится, пока мышь не коснется дочернего элемента, это будет здорово. но состояния «двойного зависания» действительно дают мне некоторую идею для решения этой проблемы, thx! – FlyC

непрозрачность не меняется, если вы не наведете над родителем ... как еще вы этого хотели? – Aziz

непрозрачность не изменится, если я не навещу ребенка. как только я навещу ребенка, непрозрачность другого ребенка изменится. что-то вроде этого ... thx – FlyC

На соответствующую записку, ~ для общего преемника брата (то есть элемент приходит после этого, но не обязательно сразу после) и является селектором CSS3. + для следующего брата и является CSS2.1.

См. Adjacent sibling combinator от Selectors Level 3 и 5.7 Adjacent sibling selectors от Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.

источник

2016-04-14 07:18:04

Как использовать чистый CSS для управления другими элементами под одним родителем?

ответ

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