Pointer/cursor not changing when hover over a link

Report · Apr 15, 2017

Hello

I have created some hotspots on a large image so that certain things can be clicked on.

The issue I have is that the cursor only changes from the arrow to the hand on a few of the hotspots which are all roughly the same size. Sometimes the pointer changes for a brief moment before reverting to the arrow once again. I dont know if the page code is required for this but here it is -

<!DOCTYPE HTML>

<html>

<head>

<title> Ultimate Trumps | The home of intelligent and factual Trumps</title>

<title>Ultimate Trumps</title>

</style>

</head>

<body>

<li><a href="contact.html">Contact</a></li>

<li><a href="aboutus.html">About</a></li>

<li><a href="history.html">History</a></li>

<li><a href="packs.html">Packs</a></li>

</ul>

</div>

<p>Get more info on Trumps</p>

</div>

</map>

</h1>

</div>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-77568335-1', 'auto');

ga('send', 'pageview');

</script>

</div>

<h3>Sign up to our Newsletter and keep up to date with all things Trumps!</h3>

<h2>Ultimate Top Trumps</h2>

<p>Ultimate Top Trumps is your one stop for all things Trump related. The biggest site of its kind on the web, Ultimate Trumps has to be your first port of call for all collectors and fans.<br>

Ultimate Trumps also buys collections so if your thinking of selling, then get in contact with the team and see how they can help you make some extra money!</p>

</div>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

I am using CS6.

Thanks in advance!

Report · Apr 15, 2017

Image maps are an old school approach. Most site designers avoid using them because they are not responsive. Why don't you slice the images in Photoshop and use individual image links?

HTML:

CSS:

a img {

cursor:pointer;

opacity: 0.8;

}

img a:hover,

img a:focus,

img a:active {opacity: 1.0}

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2017

Nancy, yes that seems the more logical way especially as the image mapping is not responsive. I want the site to be viewable on desktop and mobiles.

Thank you Nancy, your a star!!!

Report · Apr 16, 2017

Nancy,

I have done some of the images but the pointer still shows as an arrow and not a pointing finger.

The css -

img a:hover,

img a:focus,

img a:active {opacity: 1.0}

I dont quite understand as there are not curly braces where is was expecting. Where about in my css does this go and are the curly braces actually missing or am I missing something obvious?

Thank you!

Report · Apr 16, 2017

By default, hyperlinks will always produce the right cursor. If it's not working, you have either not linked your images or your code contains errors. Use the Validation tool to check your document and fix the reported errors.

You should see a green check mark denoting error free code. If you see a red X, your code has errors that need fixing.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Pointer/cursor not changing when hover over a link

1 Correct answer

Photos