Non Bubbling Hover

CSS Hover Tricks

by Ben Clayton

HTML

<div class="TD1 border">
  <div class="title">
  </div>

  <div class="TD2 border">
    <div class="title">
    </div>
  </div>
  <div class="TD3 border">
    <div class="title">
    </div>
  </div>


</div>

CSS

.TD1 {
  width: 200px;
  height: 400px;
}

.TD2,.TD3 {
  width: 80px;
  height: 80px;
  margin: 20px;
}


.title {
  width: 100%;
  height: 20px;
  background-color: #F0F0F0;
}

.border {
  border: 2px solid #F0F0F0;
}

.border.wander {
  border: 2px solid #E0E0F0;
}

.wander > .title {
  background-color: #E0E0F0;
}

JavaScript

$(".border").on("mouseover",function(event){

        event = event ? event : window.event;
        event.returnValue = false;
        event.cancelBubble = true;
        if (event.stopPropagation) {
            event.stopPropagation();
        }

				var el = event.target;
        debugger;
        $(".border").removeClass('wander');
        $(el).addClass('wander');
});

$(".border").on("mouseout",function(event){
        event = event ? event : window.event;
        event.returnValue = false;
        event.cancelBubble = true;
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        $(".border").removeClass('wander');
});