Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Question

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself.

Any assistance would be highly appreciated.

Here is what I currently have:

jQuery(document).ready(function($) {
    $(".aca-question-container").hover(function() {
       $(".icon").trigger("hover");
    });
    $(".aca-question-container").click(function(){
       window.location=$(this).find("a").attr("href");
       return false;
    });
});

Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output

javascript jquery css

Answer 1

Answer №1

If you're working with HTML5, one interesting technique is wrapping block elements like the .wrapper div inside anchors. Here's a simple example to get you started: http://jsbin.com/qegesapore/edit?html,css,js,output

I took out the JS code because it might not be necessary, and of course, some adjustments will need to be made for styling.

Actually, there shouldn't really be a need for JS to accomplish this task.

You can still apply a hover effect to the icon using CSS:

.your-anchor:hover .icon {
  background: #666;
}

Answer 2

If you're working with HTML5, one interesting technique is wrapping block elements like the .wrapper div inside anchors. Here's a simple example to get you started: http://jsbin.com/qegesapore/edit?html,css,js,output

I took out the JS code because it might not be necessary, and of course, some adjustments will need to be made for styling.

Actually, there shouldn't really be a need for JS to accomplish this task.

You can still apply a hover effect to the icon using CSS:

.your-anchor:hover .icon {
  background: #666;
}

Answer 3

Answer №2

One way to achieve the desired effect is by using jQuery and a class. Check out the code snippet below which should be included within the onload function:

$('div#wrapper').mouseenter(function(){
  $('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
  $('a.icon').removeClass('hover');
});

Don't forget to update your CSS as well. Replace a.icon:hover with a.icon:hover, a.icon.hover in order to replicate the hover state when the class is added. Here's how you can do it:

a.icon:hover, a.icon.hover{
  //CSS STYLES GO HERE
}

Answer 4

One way to achieve the desired effect is by using jQuery and a class. Check out the code snippet below which should be included within the onload function:

$('div#wrapper').mouseenter(function(){
  $('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
  $('a.icon').removeClass('hover');
});

Don't forget to update your CSS as well. Replace a.icon:hover with a.icon:hover, a.icon.hover in order to replicate the hover state when the class is added. Here's how you can do it:

a.icon:hover, a.icon.hover{
  //CSS STYLES GO HERE
}

Answer 5

Answer №3

When it comes to handling the CSS portion, extending the hover effect is a breeze. Simply utilize .wrapper:hover .icon as your selector for the hover effect. You can omit .icon:hover because the parent element is hovered when the child element is hovered.

In terms of passing the click event down to the target element, it can also be achieved without jQuery.

.wrapper:hover .icon{
  color:#f00;
}

<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
  <a href="google.com" class="icon">icon</a>
testit
</div>

The error that arises mentioning "there's no stackoverflow.com/google.com" indicates that the link was successfully followed. To resolve this issue, prepend https:// to the href and remove it from an iframe to fully witness its functionality.

EDIT: The solution proposed by bsod99 is more concise. If you have the flexibility to restructure the DOM and do not need to cater to outdated browsers (like pre-HTML5 specifications browsers such as Firefox <3.5) - which most likely isn't necessary - then I recommend following his approach.

Answer 6

When it comes to handling the CSS portion, extending the hover effect is a breeze. Simply utilize .wrapper:hover .icon as your selector for the hover effect. You can omit .icon:hover because the parent element is hovered when the child element is hovered.

In terms of passing the click event down to the target element, it can also be achieved without jQuery.

.wrapper:hover .icon{
  color:#f00;
}

<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
  <a href="google.com" class="icon">icon</a>
testit
</div>

The error that arises mentioning "there's no stackoverflow.com/google.com" indicates that the link was successfully followed. To resolve this issue, prepend https:// to the href and remove it from an iframe to fully witness its functionality.

EDIT: The solution proposed by bsod99 is more concise. If you have the flexibility to restructure the DOM and do not need to cater to outdated browsers (like pre-HTML5 specifications browsers such as Firefox <3.5) - which most likely isn't necessary - then I recommend following his approach.

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Answer №1

Answer №2

Answer №3

Similar questions

Choose from the options provided to display the table on the screen

Obtain input from request payload in WCF/ADO.NET Data Service

Using Vue to fetch JSON data with Axios

What is the best way to identify which JavaScript code is triggering or managing an event?

Learn the art of blurring elements upon clicking in Vue

The $http service factory in Angular is causing a duplication of calls

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

What is the process for incorporating an external script into my Vue methods?

Incorporating a delay into looped HTTP requests while effectively utilizing Promise.all to track their completion

Testing Vue Components - Simulating the return value of a plugin

What is causing Puppeteer to not wait?

Switching class names on click in Vue.js

What is the best way to position this sidebar on the right instead of the left?

Currently struggling to retrieve data from an AJAX post request within a C# controller

Datatables.js columns mismatch issue

The Vue warning states that the property "$store" was attempted to be accessed during rendering, but it is not defined on the current instance

Using Javascript and jQuery, populate a dropdown menu with options that are extracted from a different dropdown menu

AngularJS Expandable Table - Unlocking Limitless Possibilities

Navigating to a new page once a backend function in Express has finished executing

I am interested in creating a header that remains static