Предотвращение запуска события Hover для Div в родительском Div?

При наведении курсора мыши на .mensalDIV он вызовет наведение курсора на родительский .operaDIV, что мне кажется неправильным. Я просто хочу, чтобы эффект «выделения» работал над дочерним элементом .operaDIV.

#operaContent {
  padding: 0 50px 0 50px;
  position: relative;
  overflow: visible;
}
#operaContent.opera {
  display: block;
  border: 1px solid #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  padding: 5px;
  margin-bottom: 10px;
  height: 120px;
  background-color: #0A8ECC;
}
#operaContent.opera:hover {
  border: 1px solid #AAAAAA;
  background-color: #DDDDDD;
  cursor: pointer;
}
.mensal {
  position: absolute;
  top: 1px;
  left: 8px;
  z-index: 3;
  display: block;
}
<div id="operaContent">
  <div class="opera">
    <div class="mensal">
      DIV
    </div>
  </div>
</div>
8
задан KyleMit 14 February 2015 в 18:30
поделиться