Div hover pointer

Question

I have div2(height 20px vertical align centre) inside div1(100px) and div2 having anchor tag.

On hover of div1 I am showing hand pointer, but also want on click anywhere in div1 area it should navigate to anchor tag url. Please refer Image for more detail

.test:hover {
  cursor: pointer;
  cursor: hand;
}

<div class="test" style="height:100px">
  <div style=" position: relative; top: 50%; transform: translateY(-50%);">
    <a href="google.com" ; target="_blank" title="This link opens in a new window" style="color:#2e3940;text-decoration: initial;">Pawan Kotak</a>
  </div>
</div>

Please post your actual HTML and CSS, along with the code you wrote to attempt to solve this yourself, within the question — Rory McCrossan
– Rory McCrossan, Commented Nov 29, 2016 at 10:10
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> .test:hover{ cursor: pointer; cursor: hand; } </style> </head> <body> <div class="test" style="height:100px"><div style=" position: relative; top: 50%; transform: translateY(-50%);" ><a href="google.com" target="_blank" title="This link opens in a new window" style="color:#2e3940;text-decoration: initial;" > Pawan Kotak</a></div></div> </body> </html> — Pawan Kotak
– Pawan Kotak, Commented Nov 29, 2016 at 10:23
Thanks. In future, please use the edit button in your question so the code can be formatted properly. I've done this for you in this case — Rory McCrossan
– Rory McCrossan, Commented Nov 29, 2016 at 10:24

Rory McCrossan · Accepted Answer · 2016-11-29 10:32:12Z

4

If the outer 'div' should behave like an anchor, just reorder the elements like this:

<a href="myAnchor.tld">
  <div id="div1">
    <div id="div2"></div>
  </div>
</a>

You don't have to mess around with jQuery, if your markup could simply be structured the way it actualy works.

edited Nov 29, 2016 at 10:32

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Nov 29, 2016 at 10:20

fuma

5,9274 gold badges37 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

spankajd · Accepted Answer · 2016-11-29 10:16:09Z

2

try with following way

$(div1).on("click",function(){
   window.location = $(this).find("a").attr("href"); 
});

this is just a wayout.

answered Nov 29, 2016 at 10:16

spankajd

9527 silver badges14 bronze badges

Comments

Rajshekar Reddy · Accepted Answer · 2016-11-29 10:15:20Z

2

Assuming your div id's to be div1 and div2 here is a solution.

$('#div1').on('click',function(){
  $(this).find('a').trigger('click');
});

The script will attach a click event to the div1 and when ever user clicks this div it finds the a tag with in it $(this).find('a') and triggers a click event on that anchor tag.

answered Nov 29, 2016 at 10:15

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

2 Comments

Pawan Kotak Over a year ago

multiple times event get fired one for div and one for anchor tag when i click on anchor tag..how can i avoid multiple trigger of even

Rajshekar Reddy Over a year ago

@pawankotak you can do event.stopimmediatepropagation() which will stop the bubbling of the events..

arhak · Accepted Answer · 2016-11-29 10:28:56Z

1

you can also grow your anchor tag (there are several methods/approaches)

.test {
  background-color: red;
}
.test a {
  cursor: hand;
  background-color: blue;
  display: block;
  line-height: 100px;
}

<div class="test" style="height:100px">
  <div style=" position: relative; top: 50%; transform: translateY(-50%);">
    <a href="google.com" ; target="_blank" title="This link opens in a new window" style="color:#2e3940;text-decoration: initial;">Pawan Kotak</a>
  </div>
</div>

answered Nov 29, 2016 at 10:28

arhak

2,5721 gold badge27 silver badges39 bronze badges

1 Comment

Pawan Kotak Over a year ago

I tried your solution but in my case some multi line text was also present in anchor tag which was creating problem. thanks

Collectives™ on Stack Overflow

Div hover pointer

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related