Effect How to - Handle Nested hover events

Question

We would like to know how to handle Nested hover events.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.link-wrap {<!--from  w ww  .  j  av  a2s  . co  m-->
  background-color: lightgray;
  overflow: auto;
  display: inline-block;
}

.link-panel {
  width: 100px;
  line-height: 100px;
  text-align: center;
  background-color: blue;
  color: white;
  float: left;
  margin: 10px;
}

.link-wrap:hover .link-panel {
  background-color: yellow;
  color: black;
}

.link-wrap .link-panel:hover {
  background-color: green;
  color: white;
}
</style>
</head>
<body>
  <div class="link-wrap">
    <div class="link-panel">Link 1</div>
    <div class="link-panel">Link 2</div>
    <div class="link-panel">Link 3</div>
    <div class="link-panel">Link 4</div>
  </div>
</body>
</html>

The code above is rendered as follows: