How do I make a DIV appear when positioning the mouse on top of an img?

Asked

Viewed 47 times

-3

I’m having difficulty making a menu on the site I’m mounting, I want when the user positions the mouse pointer on top of the image in the upper left corner, open a menu at the same location where the header is located and hold at that location until the mouse leaves the area.

Print out how the HTML body is currently. Print da tela até o momento

Código JS em branco
@font-face {
    font-family: 'california';
    src: url('font/Hai_California.ttf');
    src: url('Hai_California?#iefix') format('embedded-opentype'),
      url('font/Hai_California.ttf') format('svg'),
      url('font/Hai_California.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    /* 
    
        Usa uma fonte externa (baixada ou internet) e disponibiliza para que 
        caso o usuário não tenha a mesma instalada na sua máquina, seja feito o
        download da fonte.
    
    
    */
  }
html, body {
        background-color: #ffff;   
        margin: 0;
        padding: 0;
}
img.menu_icon {
        margin-left: 15px;
        margin-top: 15px;
        width: 50px;
        height: 50px;
}
.menu_icon:hover .menu {
     display: block;
     position: absolute;
     z-index: -1;
}
img.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#header {
    position: absolute;
    top: 0px;
    width: 1366px;
    height: 220px;
    margin: 0px;
    background: rgb(245,183,46);
    background: linear-gradient(0deg, rgba(245,183,46,1) 0%, rgba(249,219,92,1) 100%);
    color: black;
}
.menu {
    opacity: 0.75;
    position: absolute;
    top: 0px;
    width: 1366px;
    height: 220px;
    margin: 0px;
    background-color: #cc444b;
    color: white;
    display: none;
    
}
.menu ul li {
    list-style: none;
}
#header h1 {
    margin-top: 50px;
    text-align: center;
}
.logo {
    margin-top: -250px;
    width: 120px;
    height: 120px;
}
/*

    Centraliza a imaem dentro do header

*/
.logo_nome {
    margin-top: auto;
}
.logo_nome a {
    color: black;
    text-decoration: none;
}
.conteiner img {
    max-width: 200px;
    max-height: 150px;
    width: auto;
    height: auto;
}
h1 {
    font-weight: bold;
    text-shadow: 5px 5px 7px #6b722d;
    font-size:  70px;
    font-family: california, cursive;
}
<!DOCTYPE html>
<html lang="pt-br"> 
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="sortcut icon" type="image/x-icon" href="fotos/logo.png"> 
        <link rel="stylesheet" type="text/css" href="css/index.css" >
        <title>Sal de Ouro</title>
    </head>
    <body>
        <nav class="menu">
            <ul>
                <li><a href="">Teste</a></li>
                <li><a href="">Teste</a></li>
                <li><a href="">Teste</a></li>
                <li><a href="">Teste</a></li>
                <li><a href="">Texte</a></li>
            </ul>
    </nav>
        <div id="header">
            <img class="menu_icon" src="fotos/menu.png" >
            <h1>Sal de Ouro</h1>
            <img class="logo" src="fotos/logo.png" /> 
        </div> 
        <script type="text/javascript" src="javascript/index.js" />
    </body>
</html>

html css

3 answers

0


Hello...

Maybe the suggestion below will help.

Basically the strategy is as follows: The button that has the menu is actually the menu itself that will expand.

To ensure performance, it is set to an arbitrary size and sufficient to display only the menu icon. It is also configured overflow:hidden. This will ensure that the rest of the menu does not appear.

In the :hover it has its size changed to allow the display of the full content. At this point, one can hide the menu button, or not.

div.header-menu{
  background-color: yellow;
  height: 120px;
}

div.menu-icon{
  width: 48px;
  height: 48px;
}

div.bt-menu{
  display: block;
  width: 48px;
  height: 48px;
  background-color: blue;
  overflow: hidden;
  transition: width 0.5s, height 0.8s;
}

div.bt-menu:hover{
  width: 180px;
  height: 120px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

div.bt-menu:hover div.menu-icon{
  display: none;
}

div.bt-menu:hover ul.menu{
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

ul.menu li{
   display: inline-block;
   width: 100%;
   background-color: red;
}
<div class="header-menu">
  <div class="bt-menu">
    <div class="menu-icon">
       Menu <!-- aqui o icone de menu -->
    </div> <!-- .menu-icon -->
    <nav>
      <ul class="menu">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 1</a></li>
      </ul>
    </nav>
  </div> <!-- bt-menu -->
</div>

-2

Hello would not use CSS for this, I will show in JS how you would do, a note you are using display None so you need to add the z-index in the class . menu as below.

function apareceMenu()
{
    document.querySelector(".menu").style.display = 'block';
}
.menu {
    opacity: 0.75;
    position: absolute;
    top: 0px;
    width: 1366px;
    height: 220px;
    margin: 0px;
    background-color: #cc444b;
    color: white;
    display: none;
    z-index: 1;
    
}
<img class="menu_icon" onmouseover="apareceMenu()" src="fotos/menu.png" >

<style>
@font-face {
    font-family: 'california';
    src: url('font/Hai_California.ttf');
    src: url('Hai_California?#iefix') format('embedded-opentype'),
      url('font/Hai_California.ttf') format('svg'),
      url('font/Hai_California.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    /* 
    
        Usa uma fonte externa (baixada ou internet) e disponibiliza para que 
        caso o usuário não tenha a mesma instalada na sua máquina, seja feito o
        download da fonte.
    
    
    */
  }
html, body {
        background-color: #ffff;   
        margin: 0;
        padding: 0;
}
img.menu_icon {
        margin-left: 15px;
        margin-top: 15px;
        width: 50px;
        height: 50px;
}
.menu_icon:hover .menu {
     display: block;
     position: absolute;
     z-index: -1;
}
img.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#header {
    position: absolute;
    top: 0px;
    width: 1366px;
    height: 220px;
    margin: 0px;
    background: rgb(245,183,46);
    background: linear-gradient(0deg, rgba(245,183,46,1) 0%, rgba(249,219,92,1) 100%);
    color: black;
}
.menu {
    opacity: 0.75;
    position: absolute;
    top: 0px;
    width: 1366px;
    height: 220px;
    margin: 0px;
    background-color: #cc444b;
    color: white;
    display: none;
    z-index: 1;
    
}
.menu ul li {
    list-style: none;
}
#header h1 {
    margin-top: 50px;
    text-align: center;
}
.logo {
    margin-top: -250px;
    width: 120px;
    height: 120px;
}
/*

    Centraliza a imaem dentro do header

*/
.logo_nome {
    margin-top: auto;
}
.logo_nome a {
    color: black;
    text-decoration: none;
}
.conteiner img {
    max-width: 200px;
    max-height: 150px;
    width: auto;
    height: auto;
}
h1 {
    font-weight: bold;
    text-shadow: 5px 5px 7px #6b722d;
    font-size:  70px;
    font-family: california, cursive;
}
</style>
<!DOCTYPE html>
<html lang="pt-br"> 
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="sortcut icon" type="image/x-icon" href="fotos/logo.png"> 
        <link rel="stylesheet" type="text/css" href="css/index.css" >
        <title>Sal de Ouro</title>
    </head>
    <body>
        <nav class="menu" onmouseout="someMenu()">
            <ul>
                <li><a href="">Teste</a></li>
                <li><a href="">Teste</a></li>
                <li><a href="">Teste</a></li>
                <li><a href="">Teste</a></li>
                <li><a href="">Texte</a></li>
            </ul>
    </nav>
        <div id="header">
            <img class="menu_icon" onmouseover="apareceMenu()" src="fotos/menu.png" >
            <h1>Sal de Ouro</h1>
            <img class="logo" src="fotos/logo.png" /> 
        </div> 
    </body>
</html>
<script>
function apareceMenu()
{
    document.querySelector(".menu").style.display = 'block';
}

function someMenu()
{
document.querySelector(".menu").style.display = 'none';
}
</script>

  • Still not working :c

  • I put in the full code, but the only changes were these!

  • thanks for the help, but it still didn’t work

  • When click on the run here in the stack works, which error is showing?

  • no stack is working normal, but in html body does not work, does not show any error

  • Hello, now it worked out, I was forgetting to put the js file in the html file, now I just need the menu to disappear when the mouse pointer leaves the area

  • I updated the code to go up too!

  • It worked! thanks for the help <3

Show 3 more comments

-4

Try using the pseudo-elements :hover or the :active in the header, Hover is activated when the mouse is positioned on top of the element and activates it when it is clicked.

.header:hover{
   /* lógica para mostrar o menu */
}

  • I’m already using :Hover (as shown in the code), but it’s not working.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.