How to make one element continue with effect when moving the mouse in another?

Question

How to make one element continue with effect when moving the mouse in another?

Navigation

#1 by (3 votes)
#2 by (1 votes)

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 hover effect of the main buttons remain when hovering the mouse over the secondary buttons, because when the mouse is passed over the "sub-items" the effect of the main items some. Note: Only with html and css, if it is not possible to show another solution.

html5 css3

asked by anonymous 07.07.2017 / 16:28

2 answers

1

I just did a css concatenation, as I work more with front and back end it was easier to find the solution with css, so I can work with several elements with different styles, the code looks 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 have helped. :)

07.07.2017 / 16:47

Very large input fields error 405 Method Not Allowed

score 3 · Accepted Answer

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

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

You will need to do:

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

And in CSS, change the styles of:

.sessao1:hover {
  ...
}

To:

.sessao1:hover > button {
  ...
}

In order to keep the font color white in the submenu, you can separate the two styles, as in

.classes button:hover {
  color: white;
}

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

In this way the hover effect remains while the mouse is in the submenu and all buttons within .classes will be white with the mouse >. In the style of .sessao1 , only the border style remains, 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 confusing. From what I've seen, you're applying the style twice to .classes button , so the second will overwrite the first. Be careful about that.