Grow your CSS skills. Land your dream job.

[Solved] Change contents of DIV on hover?

  • # July 9, 2013 at 2:22 am

    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

    # July 9, 2013 at 2:31 am

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

    # July 9, 2013 at 3:04 am

    @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.

    # July 9, 2013 at 6:57 am

    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”).

    # July 9, 2013 at 11:16 am

    @David_Leitch

    Works beautifully! Thank you.

    # September 11, 2013 at 5:45 am

    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.

    # September 11, 2013 at 6:56 am

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

    # September 12, 2013 at 5:12 am

    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.

    # September 12, 2013 at 6:57 am

    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

    # September 13, 2013 at 4:39 am

    Worked a charm.

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".