Как заставить div исчезнуть/появиться при зависании на другом div?

Question

Как отображать линию, когда я навешиваю над своим кругом div?

#line { 
 
    display: none 
 
}

<div id='circle'> 
 
    <div id= 'line'>

Answer 1

Предполагая, что вы используете JQuery вы можете использовать:

var enterHandler = function(){ 
    $("#line").show(); 
}; 

var leaveHandler = function(){ 
    $("#line").hide(); 
}; 

$("#circle").hover(enterHandler, leaveHandler); 

Answer 2

Если вы используете JQuery, то вы можете просто попробовать:

$('#circle').on('mouseover', function() { 
    $('#line').show(); 
}); 

$('#circle').on('mouseleave', function() { 
    $('#line').hide(); 
}); 

Answer 3

Первая вещь, с кодом, не ясно, если <div> s являются братьями и сестрами являются вложенными , Я дам вам решение для обоих.

Уплотненный

div { 
 
    padding: 10px; 
 
    background: #99c; 
 
} 
 
#line { 
 
    display: none; 
 
    background: #9c9; 
 
} 
 
#circle:hover #line { 
 
    display: block; 
 
}

<div id='circle'> 
 
    <div id='line'> 
 
    </div> 
 
</div>

Братья

div { 
 
    padding: 10px; 
 
    background: #99c; 
 
} 
 
#line { 
 
    display: none; 
 
    background: #9c9; 
 
} 
 
#circle:hover + #line { 
 
    display: block; 
 
}

<div id='circle'> 
 
</div> 
 
<div id='line'> 
 
</div>

Answer 4

JQuery будет простейшим.

$('#circle').hover(function(){ 
    $('#line').css('display','inline'); 
}); 

или что бы вы ни отображали для отображения.

Answer 5

Попробуйте это в тег сценария и использовать OnMouseOver и onmouseout событий

<script> 
    function hidediv() { 
     document.getElementById('line').style.display = 'none'; 
    } 
    function showdiv() { 
     document.getElementById('line').style.display = 'block'; 
    } 
</script> 

    <div id='circle' onmouseover="hidediv();" onmouseout="showdiv();" > this is circle 
     <div id= 'line'>this is line 
     </div> 
    </div>