block with css on the mouseover

Asked

Viewed 66 times

0

In CSS has way of passing the mouse on an element, do display: block in another as is done in JS?

The object is that I have the following structure:

<ul class="menuAdmin centralisado">
    <li>
        <label>Cadastros</label>
        <ul>
            <li><a href="?inserir&cliente">Clientes</a></li>
            <li><a href="?inserir&produto">Produtos</a></li>
        </ul>
    </li>
    <li>
        <label>Listagens</label>
        <ul>
            <li><a href="?listar&clientes">Clientes</a></li>
            <li><a href="?listar&pedidos">Pedidos</a></li>
            <li><a href="?listar&produtos">Podutos</a></li>
        </ul>
    </li>
</ul>

I need to do that by passing the mouse for example on the label Listings, ul below it, that will be with diplay: none, become display: block

css css3

  • there is the :hover with the operator +. ex: label:hover + ul, but take a look at the link @sam mentioned

  • sorry but I could not find in the answers where is the mouseover and display:block placement in the brother element

  • thus: ul.menuAdmin li label:Hovet + ul { display: block; } ;?

  • yes, but it’s :hover and not :hovet

  • I know, it happens. kkk, thanks!

2 answers

2


You can do it the way down:

ul.menuAdmin > li > ul {
   display: none;
}
ul.menuAdmin > li:hover > ul {
    display: block
}

Html

<ul class="menuAdmin centralisado">
    <li>
        <label>Cadastros</label>
        <ul>
            <li><a href="?inserir&cliente">Clientes</a></li>
            <li><a href="?inserir&produto">Produtos</a></li>
        </ul>
    </li>
    <li>
        <label>Listagens</label>
        <ul>
            <li><a href="?listar&clientes">Clientes</a></li>
            <li><a href="?listar&pedidos">Pedidos</a></li>
            <li><a href="?listar&produtos">Podutos</a></li>
        </ul>
    </li>
</ul>

  • Perfect! That’s what it was. Thank you!

0

In Javascript the code would look like this.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example</title>
  <style>
  

  </style>
</head>
<body>

  <ul class="menuAdmin centralisado">
    <li>
        <label>Cadastros</label>
        <ul>
            <li><a href="?inserir&cliente">Clientes</a></li>
            <li><a href="?inserir&produto">Produtos</a></li>
        </ul>
    </li>
    <li>
        <label>Listagens</label>
        <ul>
            <li><a href="?listar&clientes">Clientes</a></li>
            <li><a href="?listar&pedidos">Pedidos</a></li>
            <li><a href="?listar&produtos">Podutos</a></li>
        </ul>
    </li>
</ul>


<script>

var Listagens = window.document.getElementsByTagName("label")[1];
var ListaUl = window.document.getElementsByTagName("ul")[1];
Listagens.addEventListener("mouseover", ListagensLista);

function ListagensLista() {
  ListaUl.style.display = "block";
  console.log("E sou bloco");
}

</script>
  
</body>
</html>

Browser other questions tagged css css3

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