Question

我想根据黄色框悬停

更改element1,2,3的背景颜色

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

它没有缝合来完成这项工作。我做错了什么？

http://cssdeck.com/labs/je9dvoor

Answer 1

你无法用纯CSS做你需要的东西，因为选择器无法爬上DOM并找到初始元素的兄弟（我注意到我很清楚^^）。

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

请注意.box.icon选择同时包含“box”和“icon”类的DOM元素（即div class =“box icon”）。如果要选择元素的子元素，请不要忘记添加空格（.box .icon选择每个.icon，它是.box元素的子元素）。并且.box＆gt; .icon选择.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>

这是一个小提琴：https://jsfiddle.net/0o1z46u8/

我想我选错了＃CSS3

1 个答案: