我想我选错了#CSS3

Question

我想根据悬停的黄色框更改元素 1、2、3 的背景颜色

    .box.icon:nth-child(2):hover > .doanimacji.element:nth-child(2) {
       background-color: red;
}

做这项工作并不顺利。我做错了什么？

http://cssdeck.com/labs/je9dvoor

Answer 1

你不能用纯粹的CSS做你想做的事，因为select或无法攀登DOM并到达初始元素的兄弟（我是请注意，确保我很清楚 ^^)。

您需要更改 HTML 模板或使用 Javascript/JQuery。

请注意 .box.icon select 是一个 DOM 元素，同时具有 "box" 和 "icon" class（即 div class="box icon"）。如果您想 select 元素的子元素（.box .icon selects 每个 .icon 是 .box 元素的子元素），请不要忘记添加 space . .box > .icon selects 是 .box 的直接子级 .icon。

$(document).ready(function() {
    $('.box').on('mouseenter', '.icon', function() { // mouse enters in yellow square
        var data = $(this).data('nb'); // get the information inside data-nb
        var elem = $('.doanimacji > .element:nth-of-type('+data+')');
        elem.addClass('hovered');
    });
    $('.box').on('mouseleave', '.icon', function() { // mouse leaves yellow square
        $('.doanimacji > .element').removeClass('hovered');
    });
});

html,body{
    margin: 0;
    padding: 0;
    background-color: #c1c1c1; 
}
.box{
    width: 800px;
    height: 300px;
    margin: auto auto;
    background-color: aqua;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.icon{
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
    text-align: center;
}
.doanimacji{
    height: 200px;
    width: 100%;
    background-color: beige;
    opacity: 0.5;
    margin-top: 5%;
}
.element{
    height: 90%;
    width: 30%;
    background-color: green;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}

.hovered {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <div class="icon" data-nb="1">1</div>
    <div class="icon" data-nb="2">2</div>
    <div class="icon" data-nb="3">3</div>
    <div class="icon" data-nb="4">4</div>
    <div class="icon" data-nb="5">5</div>
</div>
<div class="doanimacji">
    <div class="element">element1</div>
    <div class="element">element2</div>
    <div class="element">element3</div>
</div>

这是一个 fiddle : https://jsfiddle.net/0o1z46u8/

我想我选错了#CSS3

I think i'm selecting it wrong #CSS3

html

select

class

hover