How to make one element continue with effect when passing the mouse on another?

Asked

Viewed 243 times

0

I have the following code:

  .classes {
  margin-top: 80px;
  height: auto;
  background-color: red;
}

.classes ul {
  list-style: none;
  float: left;
  position: absolute;
}

.classes ul li {
  position: relative;
}

.classes button {
  display: block;
  border: none;
  text-align: left;
}

.classes ul li ul {
  position: absolute;
  display: none;
  left: 100%;
  top: 0;
  border-left: 3px solid black;
  padding-left: 0px;
}

.classes ul li:hover ul {
  display: block;
}

.classes button {
  padding: 15px;
  width: 100%;
  background-color: #7D8A9B;
  border-bottom: 2px solid #ccc;
}

.classes .sessoes {
  border: none;
}


/*Móveis*/

.sessao1:hover {
  color: white;
  border-bottom: 2px solid #7ec8fc;
}

.moveis:hover {
  background-color: #7ec8fc;
  color: white;
}


/*Roupas*/

.sessao2:hover {
  border-bottom: 2px solid #82edaa;
}

.roupas:hover {
  background-color: #82edaa;
}


/*Outros*/

.sessao3:hover {
  color: white;
  border-bottom: 2px solid #f34f4f;
}

.outros:hover {
  background-color: #f34f4f;
  color: white;
}


/*Cozinha*/

.sessao4:hover {
  border-bottom: 2px solid #E6E0D4;
}

.cozinha:hover {
  backgr
<nav class="classes">
  <ul>
    <li>
      <!-- Sessão dos Móveis -->
      <button class="sessao1">Móveis</button>
      <ul>
        <li>
          <button class="sessoes moveis" id="linkCadeira" onclick="cadeira()">Cadeiras</button>

        </li>
        <li>
          <button class="sessoes moveis" onclick="mesas()">Mesas</button>
        </li>
        <li>
          <button class="sessoes moveis" onclick="sofas()">Sofásas</button>
        </li>
        <li>
          <button class="sessoes moveis" onclick="instantes()">Instantes</button>
        </li>
        <li>
          <button class="sessoes moveis" onclick="armarios()">Armarios</button>
        </li>
      </ul>
    </li>
    <li>
      <!-- Sessão das Roupas -->
      <button class="sessao2">Roupas</button>
      <ul>
        <li>
          <button class="sessoes roupas" onclick="bones()">Bonés</button>
        </li>
        <li>
          <button class="sessoes roupas" onclick="camisas()">Camisas</button>
        </li>
        <li>
          <button class="sessoes roupas" onclick="shorts()">Shorts</button>
        </li>
        <li>
          <button class="sessoes roupas" onclick="calcados()">Calçados</button>
        </li>
      </ul>
    </li>
    <li>
      <!-- Sessão dos Outros -->
      <button class="sessao3">Outros</button>
      <ul>
        <li>
          <button class="sessoes outros" onclick="quadros()">Quadros</button>
        </li>
        <li>
          <button class="sessoes outros" onclick="abajur()">Abajur</button>
        </li>
        <li>
          <button class="sessoes outros" onclick="luminarias()">Luminárias</button>
        </li>
        <li>
          <button class="sessoes outros" onclick="tapetes()">Tapetes</button>
        </li>
      </ul>
    </li>
    <li>
      <!-- Sessão dos Itens de Cozinha -->
      <button class="sessao4">Itens de Cozinha</button>
      <ul>
        <li>
          <button class="sessoes cozinha" onclick="panelas()">Panelas</button>
        </li>
        <li>
          <button class="sessoes cozinha" onclick="talheres()">Talheres</button>

        </li>
        <li>
          <button class="sessoes cozinha" onclick="fogoes()">Fogões</button>
        </li>
        <li>
          <button class="sessoes cozinha" onclick="microondas()">Microondas</button>
        </li>
      </ul>
    </li>
  </ul>
</nav>

And I want to know if it is possible and if it is how I can make the effect of the main buttons Hover remain when passing the mouse over the secondary buttons, because when you pass the mouse over the "subitens" the effect of the main items disappears. Note: Only with html and css, if no other solution can be shown.

html5 css3

  • Why use button? I think using a will become more semantic for a menu.

  • I’m using this side menu with Buttons because if you observe they have an onClick function that makes appear a div and disappear with another case is already appearing, if I were to use the tag "a" I would have to put inside the href a "#" causing the user to return to the top of the site by clicking or otherwise placing "javascript:;" inside href which would leave the obstructive code, which neither of the two options would be viable.

  • As far as I know, it is not possible using css only, you will have to resort to javascript to add/remove the correct classes to the parent element. I’ve heard that you could only do it with CSS using pointer-events, but I’m not sure.

2 answers

3


The only problem in your CSS is that you make the effect on the :hover of the button and when the mouse is over the sub-menu, the button loses the property hover. The simplest solution is to pass the effect to the :hover of the element li immediately above the button. That is, while currently you do:

<li>
  <button class="sessao1" ...>
  ...
</li>

You’ll need to do:

<li class="sessao1">
  <button ...>
  ...
</li>

And in CSS, change the styles of:

.sessao1:hover {
  ...
}

To:

.sessao1:hover > button {
  ...
}

Still, to keep the font white coloring in the sub-menu, you can separate the two styles, such as in:

.classes button:hover {
  color: white;
}

.sessao1:hover > button {
  border-bottom: 2px solid #7ec8fc;
}

Thus the effect hover remains while the mouse is in the sub-menu and all buttons inside .classes will be with the white source when passing the mouse. In the style of .sessao1 only the border style will remain, which is unique for each element. See the example below:

.classes {
  margin-top: 80px;
  height: auto;
  background-color: red;
}

.classes ul {
  list-style: none;
  float: left;
  position: absolute;
}

.classes ul li {
  position: relative;
}

.classes button {
  display: block;
  border: none;
  text-align: left;
}

.classes button:hover {
  color: white;
}

.classes ul li ul {
  position: absolute;
  display: none;
  left: 100%;
  top: 0;
  border-left: 3px solid black;
  padding-left: 0px;
}

.classes ul li:hover ul {
  display: block;
}

.classes button {
  padding: 15px;
  width: 100%;
  background-color: #7D8A9B;
  border-bottom: 2px solid #ccc;
}

.classes .sessoes {
  border: none;
}


/*Móveis*/

.sessao1:hover > button {
  color: white;
  border-bottom: 2px solid #7ec8fc;
}

.moveis:hover {
  background-color: #7ec8fc;
  color: white;
}


/*Roupas*/

.sessao2:hover > button {
  border-bottom: 2px solid #82edaa;
}

.roupas:hover {
  background-color: #82edaa;
}


/*Outros*/

.sessao3:hover > button {
  color: white;
  border-bottom: 2px solid #f34f4f;
}

.outros:hover > button {
  background-color: #f34f4f;
  color: white;
}


/*Cozinha*/

.sessao4:hover > hover {
  border-bottom: 2px solid #E6E0D4;
}
<nav class="classes">
  <ul>
    <li class="sessao1">
      <!-- Sessão dos Móveis -->
      <button>Móveis</button>
      <ul>
        <li>
          <button class="sessoes moveis" id="linkCadeira" onclick="cadeira()">Cadeiras</button>

        </li>
        <li>
          <button class="sessoes moveis" onclick="mesas()">Mesas</button>
        </li>
        <li>
          <button class="sessoes moveis" onclick="sofas()">Sofásas</button>
        </li>
        <li>
          <button class="sessoes moveis" onclick="instantes()">Instantes</button>
        </li>
        <li>
          <button class="sessoes moveis" onclick="armarios()">Armarios</button>
        </li>
      </ul>
    </li>
    <li class="sessao2">
      <!-- Sessão das Roupas -->
      <button>Roupas</button>
      <ul>
        <li>
          <button class="sessoes roupas" onclick="bones()">Bonés</button>
        </li>
        <li>
          <button class="sessoes roupas" onclick="camisas()">Camisas</button>
        </li>
        <li>
          <button class="sessoes roupas" onclick="shorts()">Shorts</button>
        </li>
        <li>
          <button class="sessoes roupas" onclick="calcados()">Calçados</button>
        </li>
      </ul>
    </li>
    <li class="sessao3">
      <!-- Sessão dos Outros -->
      <button>Outros</button>
      <ul>
        <li>
          <button class="sessoes outros" onclick="quadros()">Quadros</button>
        </li>
        <li>
          <button class="sessoes outros" onclick="abajur()">Abajur</button>
        </li>
        <li>
          <button class="sessoes outros" onclick="luminarias()">Luminárias</button>
        </li>
        <li>
          <button class="sessoes outros" onclick="tapetes()">Tapetes</button>
        </li>
      </ul>
    </li>
    <li class="sessao4">
      <!-- Sessão dos Itens de Cozinha -->
      <button>Itens de Cozinha</button>
      <ul>
        <li>
          <button class="sessoes cozinha" onclick="panelas()">Panelas</button>
        </li>
        <li>
          <button class="sessoes cozinha" onclick="talheres()">Talheres</button>

        </li>
        <li>
          <button class="sessoes cozinha" onclick="fogoes()">Fogões</button>
        </li>
        <li>
          <button class="sessoes cozinha" onclick="microondas()">Microondas</button>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Note: your CSS is pretty messed up. From what I’ve seen, you’re applying the style twice to .classes button and thus the second will overwrite the first. Be careful with that.

1

I just made a concatenation of css, as I work more with front and back-end became easier to find the solution only with css, ai can work several identical elements with different styles, the code was like this:

.classes > ul > li:hover > button {
    color: #fff;
}
.classes > ul > li > ul > li > button{
  color: #000;
}
.classes > ul > li > ul > li > button:hover{
  color: #fff;
}

I hope I’ve helped. :)

Browser other questions tagged html5 css3

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