Создание другого div, видимого на мыши, введите

Question

Я пытаюсь сделать div, на который вы можете навести указатель мыши, и появится еще один. Это то, что я до сих пор ...

HTML

<div id="buttons"> 
<div id="box"></div> 
<div id="content">content here</div> 
</div> 

CSS

#box { 
position:absolute; 
width: 10vw; 
height: 10vw; 
background-color: blue; 
} 

#content { 
position:absolute; 
width: 10vw; 
height: 10vw; 
background-color: red; 
visibility: hidden; 
} 

JQuery

$("box") 
.mouseover(function() { 
$("content").style.visibility("visible"); 
}) 

любая помощь вам будем очень благодарны. Благодаря!

Answer 1

Вы путаете JQuery с чистым JavaScript во многих местах ...

Либо сделать это в JQuery:

$("#box").mouseover(function() { 
    $("#content").css("visibility", "visible"); 
}); 

или сделать это в чистом JavaScript:

document.getElementById("box").onmouseover = function() { 
    document.getElementById("content").style.visibility = "visible"; 
}; 

Но вы можете добиться такого же эффекта, используя только css:

#box { 
 
    position:absolute; 
 
    width: 10vw; 
 
    height: 10vw; 
 
    background-color: blue; 
 
} 
 

 
#content { 
 
    position:absolute; 
 
    width: 10vw; 
 
    height: 10vw; 
 
    background-color: red; 
 
    visibility: hidden; 
 
} 
 

 
#box:hover + #content { 
 
    pointer-events: none; 
 
    visibility: visible; 
 
}

<div id="buttons"> 
 
    <div id="box"></div> 
 
    <div id="content">content here</div> 
 
</div>

Answer 2

Вы могли бы использовать:

('#box').hover(
    function() { 
    $('#content').show(); //or css('visibility','visible'); 
    }, 
    function() { 
    $('#content').hide(); //or css('visibility','hidden'); 
    } 
); 

Это показать/скрыть DIV. Вы пропустите «#»

Answer 3

Смотрите рабочую скрипку здесь: https://jsfiddle.net/8dpcuztk/

Здесь вместо атрибута видимости, играть с дисплеем: нет.

Таким образом, вы будете использовать функции show и hide для второго div.

Кроме того, ваш селектор не работает, потому что вы ищете идентификатор и должен использовать # перед идентификатором div.

$("#box").on("mouseover", function() { 
    $("#content").show(); 
}) 

Answer 4

Использование jQuery append.

$("#box").on('mouseenter', function() { 
$("#content").append("<div class='box'></div>"); 
}); 

https://jsfiddle.net/32eckm71/40/

Answer 5

$("#box").hover(
 
    function() { 
 
    $("#content").fadeIn(); //.show(); 
 
    }, 
 
    function(){ 
 
    $("#content").fadeOut(); //hide(); 
 
    } 
 
);

#buttons{position:relative;} 
 
#box { 
 
position:absolute;top:0;left:0;width:10vw;height:10vw;background-color:blue;cursor:pointer; 
 
} 
 

 
#content { 
 
position:absolute;top:100px;left:100px;width:10vw;height:10vw;background-color:red; 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <div id="box"></div> 
 
    <div id="content">content here</div> 
 
</div>