- This topic is empty.
-
AuthorPosts
-
July 9, 2013 at 2:22 am #46227ChristopherParticipant
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 #141980georgearnallParticipantCould I ask why you require it to change to a paragraph tag ?
July 9, 2013 at 3:04 am #141982ChristopherParticipantThe 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 #141994David_LeitchParticipantA 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 #142025ChristopherParticipantWorks beautifully! Thank you.
September 11, 2013 at 5:45 am #149697ChristopherParticipantSorry 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 #149700Paulie_DMemberDo you have some code you could show us in Codepen?
September 12, 2013 at 5:12 am #149802ChristopherParticipantCurrently 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 #149815Paulie_DMemberI suspect that the psuedo-element is blocking the pointer because it’s sitting on top of the block.
Try adding
pointer-events:none
to thebefore
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.
September 13, 2013 at 4:39 am #149951ChristopherParticipantWorked a charm.
Really appreciate the help man! Such an easy fix for something that would have taken me awhile to nut out.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.