[Solved] Change contents of DIV on hover?

[Christopher]

I have a small question, in a ecommerce site I’m developing I have a button (a div) with multiple elements which show the item_quantity and Cart_total and trying to have it change to a paragraph tag of ‘Checkout’ on hover.

Fairly simple solution? I’m guessing it lies somewhere in javascript, but i just lack the knowledge.

Any help is appreciated, the codepen – http://cdpn.io/lvegE

[georgearnall]

Could I ask why you require it to change to a paragraph tag ?

[Christopher]

@georgearnall

The div itself is wrapper in an anchor tag, all that needs to show on hover is the text ‘Checkout’ to show the user where the link is leading them, and how to purchase the selected items. I suggested paragraph tag as idea.

[David_Leitch]

A novel way to do it is to have ‘Checkout’ as the content of the :before pseudo element of the cart element, as I’ve done [here](http://codepen.io/David_Leitch/pen/IJvKn “http://codepen.io/David_Leitch/pen/IJvKn”).

[Christopher]

@David_Leitch

Works beautifully! Thank you.

[Christopher]

Sorry for reviving a dead thread but, with using a hover pseudo class the anchor tag seems to no longer work! Anyone have a fix?

Cheers for the help in advance.

[Paulie_D]

Do you have some code you could show us in Codepen?

[Christopher]

Currently using David’s implementation, here’s the link to the codepen. – http://codepen.io/David_Leitch/pen/IJvKn

Basically the anchor tag on the div itself no longer works with the hover state button.

Cheers Paulie.

[Paulie_D]

I suspect that the psuedo-element is blocking the pointer because it’s sitting on top of the block.

Try adding pointer-events:none to the before pseudo-element.

Here’s an example with a standard href….you have to ctrl-click in Codepen for external links but I think you can see that removing that line kills the link functionality.

http://codepen.io/anon/pen/pqoeC

[Christopher]

Worked a charm.

Really appreciate the help man! Such an easy fix for something that would have taken me awhile to nut out.

[Author]

Posts