css: показывать div при наведении курсора на другой div

#jquery #css

Вопрос:

У меня есть 2 раздела. Div A и Div B. Если Div A наведен, то мне нужно показать Div B. Можно ли этого достичь только с помощью чистого css? Или, если я сделаю это в запросе, как мне поступить с этой базой, исходя из предположения, что мы не можем использовать id для этих двух разделов.

Спасибо

Ответ №1:

Предполагая, что эти два div элемента содержатся в div :

http://jsfiddle.net/4p8CM/1/

 #container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container > div:hover   div {
    display: block
}

<div id="container">
    <div>A</div>
    <div>B</div>
</div>

:first-child Суть в том, чтобы обойти это ограничение, которое вы установили:

исходите из предположения, что мы не можем использовать id для этих двух разделов

Если вы хотите, чтобы второй div оставался видимым при наведении на него курсора, попробуйте следующее:

http://jsfiddle.net/4p8CM/3/

 #container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container:hover > div {
    display: block
}

Ответ №2:

Пожалуйста, обратите внимание, что я использовал элементы id s в этих примерах, чтобы определить, какие конкретные элементы используются. Вместо id s вы могли бы использовать практически любой другой CSS-селектор, главное — это отношения между выбранными элементами; в первом примере я использовал селектор смежного типа, а во втором — селектор-потомок.

Если вы опубликуете свою разметку и сообщите мне с комментарием, я постараюсь пересмотреть селекторы, чтобы они соответствовали тому, с чем вы работаете. В противном случае это всего лишь общее предположение. И они не всегда так полезны…

Тем не менее, ответы приведены ниже:

Если у вас очень простая разметка, то это можно сделать с помощью CSS:

 #divB {
    display: none;
}

#divA:hover   #divB {
    display:  block;
}

<div id="divA">
    Some content in 'divA'
</div>
<div id="divB">
    Some content in 'divB'
</div>

Демонстрация JS Fiddle. Или:

 #divB {
    display: none;
}

#divA:hover #divB {
    display:  block;
}

<div id="divA">
    Some content in 'divA'
    <div id="divB">
        Some content in 'divB'
    </div>
</div>

Демонстрация JS Fiddle.

1. Ваш первый ответ был лучше, потому что в нем не использовались идентификаторы. Было указано явно , что вы не можете использовать идентификаторы .

2. Ну, да; к сожалению, без разметки невозможно предложить решение, используя что-либо еще. Хотя классы работали бы так же легко…

3. Я понимаю, что вопрос был «без использования идентификаторов», но этот вопрос появился как # 1 в Google, и это решение сработало для меня (с использованием классов). Итак, 1 и спасибо!

Ответ №3:

Если вы добавите контейнер в div A и div B, вы можете сделать это очень просто таким образом:

 <style>
/* Only for testing */
.a, .b {
    border: 1px solid black;
}
/* Hide the B div */
.b {
    display:none;
}
/* Show the B div when hover on A (the container include only A when B is not displayed */
.container:hover .b {
    display: block;
}
</style>
<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

http://jsfiddle.net/royshoa/bzhz8pou/