CSS hover не работает с несколькими элементами

Question

CSS hover не работает с несколькими элементами

0

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

CSS

.main-map {
    width: 700px;
    height: 558px;
    float: left;
    position: relative;
    margin-top: 100px;
    background-image: url(map-london.png);
}

.contact-box {
    width: 250px;
    position: relative;
    float: right;
    height: 300px;
    margin-right: -160px;
    margin-top: -50px;
}



#contact1 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}

#hover1 {
    position: absolute;
    float: left;
    margin-top: 40px;
    margin-left: 230px;
    width: 50px;
    height: 50px;
    background: aqua;
}

#hover1:hover + .contact-box > #contact1 {
    display: block;
}



#contact2 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}

#hover2 {
    position: absolute;
    float: left;
    margin-top: 130px;
    margin-left: 345px;
    width: 30px;
    height: 30px;
    background: red;
}

#hover2:hover + .contact-box > #contact2 {
    display: block;
}


#contact3 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}

#hover3 {
    position: absolute;
    float: left;
    margin-top: 190px;
    margin-left: 345px;
    width: 30px;
    height: 30px;
    background: blue;
}

#hover3:hover + .contact-box > #contact3 {
    display: block;
}

И HTML

<div class="main-map">
          <div id="hover1"></div>
          <div id="hover2"></div>
          <div id="hover3"></div>


            <div class="contact-box">
                <div id="contact1">
                    This is a test.
                </div>


                <div id="contact2">
                    This is a test 2
                </div>

                <div id="contact3">
                    This is a test 3
                </div>
            </div>


        </div>

AppleTattooGuy 13 нояб. 2013, в 20:51

Источник

3

Взгляните на мой ответ ... это возможно без jQuery / JS, если элементы являются родными или хотя бы потомками одного и того же родителя.
Josh Crozier 13 нояб. 2013, в 19:44
0

Нравится? jsfiddle.net/Josh_Powell/aL4Vz/1
Josh Powell 13 нояб. 2013, в 19:46

Теги:

html

css

2 ответа

0

"+" - это "Смежный" селектор. Смежные средства прямо смежны.

http://reference.sitepoint.com/css/adjacentsiblingselector

<h2>Heading</h2>
<p>The selector for this sibling is h2+p</p>
<p>The selector for this sibling is h2+p+p</p>

Wayne 13 нояб. 2013, в 17:09

Ещё вопросы

Взгляните на мой ответ ... это возможно без jQuery / JS, если элементы являются родными или хотя бы потомками одного и того же родителя.

PSL · Accepted Answer · 2013-11-13T17-35-00.000Z

Попробуйте заменить смежный селектор + с общим селектором ~. Причина, почему это не работает, когда вы добавили несколько элементов, заключалось в том, что из-за смежного селектора, который заставит его работать только для вашего третьего элемента, т.е. hover3 поскольку после этого .contact-box.

т.е.

#hover1:hover ~ .contact-box > #contact1 {
    display: block;
}

демонстрация

Также вы можете обобщить и объединить некоторые из этих правил:

HTML:

<div class="main-map">
    <div id="hover1" class="hover"></div>
    <div id="hover2" class="hover"></div>
    <div id="hover3" class="hover"></div>
    <div class="contact-box">
        <div class="contact">This is a test.</div>
        <div class="contact">This is a test 2</div>
        <div class="contact">This is a test 3</div>
    </div>
</div>

CSS:

.contact-box > .contact {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}
#hover1 {
    margin-top: 40px;
    margin-left: 230px;
    background: aqua;
}
#hover3 {
    margin-top: 190px;
    margin-left: 345px;
    background: blue;
}
#hover2 {
    margin-top: 130px;
    margin-left: 345px;
    background: red;
}
.hover {
    position: absolute;
    float: left;
    width: 30px;
    height: 30px;
}
.hover:nth-child(1):hover ~ .contact-box :nth-child(1), 
.hover:nth-child(2):hover ~ .contact-box :nth-child(2), 
.hover:nth-child(3):hover ~ .contact-box :nth-child(3) {
    display: block;
}

демонстрация

Обратитесь за поддержкой nth-child однажды caniuse.com/#search=nth-child