1

I want to show hidden div ".menu1_element_1", when mouse is hover the li ".menu1_butt_1". Only by CSS, not jQuery. Is it possible and compatibille with all webbrowsers ?

jsFiddle DEMO

html 

<div class="menu1_sub">
  <div class="menu1_element_1">
    <h5>Sample text</h5>
  </div>
  <ul>
    <li class="menu1_butt_1">Menu Item 1</li>
  </ul>
</div>

css

.menu1_sub {
  position: absolute;
  width: 500px;
  padding: 10px 0px 10px 0px;
  background: #fff;
}
.menu1_sub ul {
  width: 200px;
  float: right;
  border-left: 1px solid #cacdd0;
}
.menu1_sub ul li {
  text-align: left;
  padding: 4px 0px 4px 12px;
  color: #6c6c6c;
  display: block;
  border: 1px solid #ffffff;
}
.menu1_element_1 {
  display: none;
  width: 200px;
}
.menu1_butt_1:hover ~ .menu1_element_1 {
  display: inline-block;
}
Patrik
  • 1,269
  • 7
  • 30
  • 49
  • No, it is absolutly not. jQuery and CSS are not the same... – Patrik Oct 04 '16 at 18:18
  • take a look at this http://jsfiddle.net/Wexcode/BEhvQ/ I know it is using ul class on hover but you can apply some code to a div. – Darcey Mckelvey Oct 04 '16 at 18:24
  • 1
    There are no previous or parent selectors in CSS. But if you are willing to change the markup and play around with order of the elements you could use some answers posted [**here**](http://stackoverflow.com/q/1817792/5496966). – AA2992 Oct 04 '16 at 18:26

0 Answers0