Shane Strong Lansing WordPress Web Developer Search Engine Optimization Website Consultant Theme Developer Magento Developer Lansing Michigan

As a developer I hate the fact that Internet Explorer is not up to date with their web browser. For instance the w3 has approved that you can use the :hover selector on anything not just a tags. Now most browsers do support the :hover selector but IE. Why they can’t catch up with times and be like everyone else is beyond my comprehension. Well one really useful thing to fix this problem is jQuery Hover. You can use jQuery Hover to give any object a hover state and it will work in IE and all other browsers. Also you can have jQuery pull out the a tags href from inside any element. For instance if you have some blocks with different information that you want to link to a certain page all you will have to do is make a box and call the a tags href.

jQuery Hover State

So to show you how to do this I am going to use my site under my main post on the homepage I have some of my recent post. Now I want to have the full post area to have a jQuery hover state that changes the background. So I would do this.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing when 
    //going outside the object area
    function out(event) {
	    $(this).css("background", "");
	}
});

jQuery Hover with a click event

If you want jQuery to do a hover state only then that will work for you but if you want to get the a tags href, so that when you click on the object area it will take you to that page. You would have to add this after your jQuery hover code. So now your jQuery code should be.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing 
    //when going outside the object area
    function out(event) {
	$(this).css("background", "");
    }
    //This adds the click event to your object and tells it where to go
    $('#YOURID').click(function() {
	window.location=$(this).find("a").attr("href");
    });
});

This is very useful to get around the IE problem and if someone checks your site they can see that you know jQuery. If you need any help with this just let me know. I would be more than willing to help.

Website Design , Development, and SEO Marketing

If you by chance need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Sponsors

Get your charm bracelets in time for the new year. LusterForever.com features a complete collection of such bracelets.

Popularity: 51% [?]

Spread and Share

•