Make item open when giving

Asked

Viewed 85 times

0

Good afternoon, I have a "menu" and instead of being an item inside the other, I am using the ~ to be able to give Hover in the element after which I passed the mouse, then, this element opens, only that, as it is not "inside", when taking the mouse from the element that receives the effect of Hover, this later element closes.

Let me give you a simple example:

ul {
  display: flex;
}

li {
  margin: 15px;
  flex-basis: 50%;
  list-style: none;
}

a {
  border: 1px solid;
  border-radius: 5px;
  display: block;
  padding: 10px;
  box-shadow: -3px -3px 0 2px blue;
}

.sss {
  display: block;
  margin: 10px 0 0 0;
  border: 1px solid red;
  padding: 10px;
  border-radius: 5px;
  width: 80%;
  float: right;
  box-shadow: -3px -3px 0 2px red;
  display: none;
}

a:hover ~ span {
  display: block;
}
    <ul>
        <li>
          <a href="#">Menu</a>
          <span class="sss">Meu primeiro link</span>
        </li>
        <li>
          <a href="#">Menu</a>
          <span class="sss">Meu segundo link</span>
        </li>
    </ul>

As you can see, the span element even appears, but if I take the mouse from the li element, that span element disappears, I need to leave it open...

css

  • You basically answered the question. If you want the effect hover is maintained, you need the element to be displayed inside the element itself. For example, why not li:hover > span?

  • Anderson, thank you, but I really need you to stay inside even if you’re not inside, is that possible? Because as this "menu" I can not touch the structure of it (Saas platform), I would have to do something in this sense.

3 answers

5


You yourself answered: the problem arises because they are fraternal elements; when the mouse is on the secondary menu, the event of Hover is waxed. How to resolve? Do what the hover stays even over the secondary menu. For example, why not use the li:hover?

ul {
  display: flex;
}

li {
  margin: 15px;
  flex-basis: 50%;
  list-style: none;
}

a {
  border: 1px solid;
  border-radius: 5px;
  display: block;
  padding: 10px;
  box-shadow: -3px -3px 0 2px blue;
}

.sss {
  display: block;
  margin: 10px 0 0 0;
  border: 1px solid red;
  padding: 10px;
  border-radius: 5px;
  width: 80%;
  float: right;
  box-shadow: -3px -3px 0 2px red;
  display: none;
}

li:hover>span {
  display: block;
}
<ul>
  <li>
    <a href="#">Menu</a>
    <span class="sss">Meu primeiro link</span>
  </li>
  <li>
    <a href="#">Menu</a>
    <span class="sss">Meu segundo link</span>
  </li>
</ul>

2

Improving the response: As in Anderson’s answer Carlos Woss, you have to put the Hover in a tag above to work, in your case on <li>

In this example I cited the dropdown class is above dropdown-content

focus on the stretch:

.dropdown:hover .dropdown-content {display: block;}

I found this example, I think it will help you. Source:https://www.w3schools.com/howto/howto_css_dropdown.asp

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Exemplo Hoverable Dropdown</h2>
<p>Mova o mouse acima do botão para exibir os menus</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

  • It works in this example because the . dropdown class is above . dropdown-content. In his example the <a> tag is at the same level as the <span> tag, you would have to use the Hover in <li>. Basically it’s the same thing you said above.

2

I can think of two alternatives,

  1. Stick the menu and submenu and place the display: block in the Hover of the element span also:

ul {
  display: flex;
}

li {
  margin: 15px 15px 0 15px;
  flex-basis: 50%;
  list-style: none;
}

a {
  border: 1px solid;
  border-radius: 5px;
  display: block;
  padding: 10px;
  box-shadow: -3px -3px 0 2px blue;
}

.sss {
  display: block;
  margin: 0;
  border: 1px solid red;
  padding: 10px;
  border-radius: 5px;
  width: 80%;
  float: right;
  box-shadow: -3px -3px 0 2px red;
  display: none;
}

a:hover ~ span {
  display: block;
}
span:hover {
  display: block;
}
<ul>
  <li>
    <a href="#">Menu</a>
    <span class="sss">Meu primeiro link</span>
  </li>
  <li>
    <a href="#">Menu</a>
    <span class="sss">Meu segundo link</span>
  </li>
</ul>

  1. Add the change from display in the Hover of the parent element, in this case the <li>:

ul {
  display: flex;
}

li {
  margin: 15px;
  flex-basis: 50%;
  list-style: none;
}

a {
  border: 1px solid;
  border-radius: 5px;
  display: block;
  padding: 10px;
  box-shadow: -3px -3px 0 2px blue;
}

.sss {
  display: block;
  margin: 10px 0 0 0;
  border: 1px solid red;
  padding: 10px;
  border-radius: 5px;
  width: 80%;
  float: right;
  box-shadow: -3px -3px 0 2px red;
  display: none;
}

li:hover > span {
  display: block;
}
<ul>
  <li>
    <a href="#">Menu</a>
    <span class="sss">Meu primeiro link</span>
  </li>
  <li>
    <a href="#">Menu</a>
    <span class="sss">Meu segundo link</span>
  </li>
</ul>

It is possible to do with animations but it is a lot of unnecessary work

Browser other questions tagged css

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