Как отобразить DIV на парении кнопки с помощью CSS

Question

Моего кода:

#dropdown { 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 80px; 
 
    border-width: 0px; 
 
    transition: background-color 1s; 
 
} 
 
#dropdown_word { 
 
    font-size: 40px; 
 
    color: orangered; 
 
} 
 
#dropdown:hover { 
 
    background-color: cyan; 
 
}

<div class="heading"> 
 
    <h2> 
 
     H2 goes here 
 
    </h2> 
 
    <div class="button"> 
 
    <p> 
 
     <button id="dropdown"> 
 
     <span id="dropdown_word"> V </span> 
 
     </button> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="content"> 
 
    <h4> 
 
     H4 goes here 
 
    </h4> 
 
    <p> 
 
    Text goes here 
 
    </p> 
 
</div>

Я хочу, чтобы отобразить класс .content, когда мышь парит на кнопке. Перед зависанием .content не должен быть видимым для пользователя. Какой код CSS можно использовать для получения вышеуказанного результата?

Answer 1

Все, что вам нужно сделать, это переместить .content DIV внутри .button DIV и применять следующие CSS:

.content{ 
    display: none; 
} 

.button:hover .content{ 
    display: block; 
} 

Вот JSFiddle.

Answer 2

Один из способов сделать это, чтобы добавить общий родительский div, содержащий как кнопку, так и div .content. Недостатком этого метода является то, что класс .content появится, если пользователь войдет в .parent div. поэтому, если ваш родительский div охватывает половину страницы, ваша кнопка будет отображаться, если вы наведете где-нибудь в этой области.

<div class="parent"> 

    <div class="heading"> 
    <h2> 
     H2 goes here 
    </h2> 
    <div class="button"> 
     <p> 
      <button id="dropdown"> 
      <span id="dropdown_word"> V </span> 
      </button> 
     </p> 
    </div>      
</div> 
<div class="content"> 
    <h4> 
     H4 goes here 
    </h4> 
     <p> 
     Text goes here 
     </p> 
    </div> 

    </div> 



#dropdown 
{ 
    width:80px; 
    height:80px; 
    border-radius: 80px; 
    border-width: 0px; 
    transition: background-color 1s; 
    } 

#dropdown_word 
{ 
    font-size:40px; 
    color:orangered; 
} 
#dropdown:hover 
{ 
    background-color: cyan; 
} 

.content{ 
    visibility: hidden; 
    } 

.parent:hover .content{ 
    visibility: initial; 
} 

Answer 3

синтаксис использования CSS visibility: visible|hidden|collapse|initial|inherit;

#dropdown { 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 80px; 
 
    border-width: 0px; 
 
    transition: background-color 1s; 
 
} 
 
#dropdown_word { 
 
    font-size: 40px; 
 
    color: orangered; 
 
    visibility: hidden; 
 
} 
 
#dropdown:hover #dropdown_word { 
 
    background-color: cyan; 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<div class="heading"> 
 
    <h2> 
 
     H2 goes here 
 
    </h2> 
 
    <div class="button"> 
 
    <p> 
 
     <button id="dropdown"> 
 
     <span id="dropdown_word"> V </span> 
 
     </button> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="content"> 
 
    <h4> 
 
     H4 goes here 
 
    </h4> 
 
    <p> 
 
    Text goes here 
 
    </p> 
 
</div>

Answer 4

, потому что кнопка не на всех связанных с .content вы не можете сделать это точно с только CSS

вы можете сделать это с помощью css, только если .content имеет отношение к th e (родственный, ребенок, родитель)

поэтому в этом случае вам нужно использовать jquery.

чек здесь jsfiddle

CSS код добавлен: .content { display:none} JQuery код добавил:

$("#dropdown").hover(
    function() { 
    $('.content').show() 
    }, 
    function() { 
    $('.content').hide() 
    } 
); 

Answer 5

#content{display:none;} 
#dropdown:hover + #content{display:block;} 

Answer 6

Вы можете сделать это с помощью JS.

var element = document.getElementsByClassName('button')[0]; 

element.addEventListener("mouseover",function(){ 
    document.getElementsByClassName('content')[0].style.display = "block"; 
}); 

element.addEventListener("mouseout",function(){ 
    document.getElementsByClassName('content')[0].style.display = "none"; 
}); 

делают содержание скрыть по умолчанию

.content { 
    display: none; 
}