Three elements, two triggers

trigger bg on element1 and element2 but not element3

HTML

<div class="wrapper">
<a href=""><div class="element1">Element 1</div></a>
  <a href="http://www.google.com" class="test"><div class="element2">
    <p class="child">
      <span class="grandchild">Element 2</span>
    </p>
    <p class="child2"></p>
    </div></a>
  <div class="element3">Element 3</div>
</div>

CSS

.wrapper div {
    pointer-events: auto;
}
.wrapper .test {
    pointer-events: auto;
}
.wrapper div.element2 {
    pointer-events: none;
}
.wrapper {
    pointer-events: none;
}
.wrapper:hover div {
    background: red;
}
.wrapper:hover div:hover {
    background: red;
}

.wrapper:hover div.element2 {
    background: none;
}

JavaScript

$('.test').click(function() {
	alert('click');
  $( ".test" ).click();
});