Question

我有一个带有一些A元素的容器div，它可以在同一个容器中更改div的背景图像。我现在希望将A元素和div元素放在单独的容器div中，因此我可以使用flex box来使事物响应。当我将它们放入容器中时，背景图像在悬停时不会改变。也许我应该使用不同的选择器而不是General sibling选择器？无能！

网址：https://melvinosengawebdesign.nl/bedrukken/

HTML

<div class="flex-container">
    <div class="container">
        <a class="size-btn a5" href="#a5" tabindex="1">
        <div class="size-txt">
            <p class="size">A5</p>
            <p class="size-cm">14,8x21cm</p>
            <p class="size-a4">1/2e van A4</p>
        </div></a> <a class="size-btn a6" href="#a6" tabindex="1">
        <div class="size-txt">
            <p class="size">A6</p>
            <p class="size-cm">10,5 x 14,8cm</p>
            <p class="size-a4">1/4e van A4</p>
        </div></a> <a class="size-btn a7" href="#a7" tabindex="1">
        <div class="size-txt">
            <p class="size">A7</p>
            <p class="size-cm">7,4 x 10,5cm</p>
            <p class="size-a4">1/8e van A4</p>
        </div></a>
    </div>
    <div class="container">
        <div class="f-a4">
            Dit is A4, het standaard papier formaat in Nederland
        </div>
        <div class="f-a5"></div>
        <div class="f-a6"></div>
        <div class="f-a7"></div>
    </div>
</div>

CSS

.a5:hover ~ .f-a5, .a5:focus ~ .f-a5 {
    background-image: url(https://mooze.nl/staticfiles/img/flyer-poster-preview.jpg);
}

.a6:hover ~ .f-a6, .a6:focus ~ .f-a6 {
    background-image: url(https://mooze.nl/staticfiles/img/flyer-poster-preview.jpg);
}

.a7:hover ~ .f-a7, .a7:focus ~ .f-a7  {
    background-image: url(https://mooze.nl/staticfiles/img/flyer-poster-preview.jpg);
}

Answer 1

CSS选择器只能针对儿童或兄弟姐妹。不是＆＃34;堂兄弟＆＃34;

但是有一些解决方法。您可以使用类似的结构，将所有内容放在Flex容器中（当然，2018-01-09 22:18:30,561 INFO CustomerLoggingApp This is sensitive and should not be logged: Customer[name=Jesse Zhuang, password=***] 2018-01-09 22:18:30,569 INFO CustomerLoggingApp But this message should be logged.之前的<a>标记），但不要使用中间容器（将链接与div分开的容器），然后使用媒体查询来调整弹性容器的宽度，一旦其中一个被包裹，就会强制div一起降下来。

老实说，javascript方法可能会更好。

一般兄弟选择器不适用于嵌套div？

1 个答案: