gordonisnz Posted June 7, 2020 Share Posted June 7, 2020 http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/w3css/w3css_tooltips.asp.html Hello. i'm looking at the W3css system, and I'm wondering if there is a hover process to REPLACE text. The above tooltip is waht im after but it INSERTS text instead of replaces it. Is there a way to hover, and replace the text with an A HREF tag / link ? PS Ive actually changed my PC & lost the URL for the w3-css tutorials. The one im familiar with is very similar to the above URL. however it looks better presented / display. Link to comment Share on other sites More sharing options...
Raul Posted June 12, 2020 Share Posted June 12, 2020 (edited) Is that what are you talking about ? ( sorry if not , im not speaking english ) <p class="w3-tooltip">London <span class="w3-text"><a target="_blank" href="https://www.youtube.com/">test</a></span> is the capital city of England.</p> Edited June 12, 2020 by Raul Link to comment Share on other sites More sharing options...
smus Posted June 13, 2020 Share Posted June 13, 2020 (edited) Yes, you can, by using pure CSS (not necessarilly with W3.css). Try something like this: <style> .label:after{ content:'text I want to change'; } .label:hover:after{ content:'changed text'; } </style> <body> <p>text <span class="label"></span> text</p> </body> Edited June 13, 2020 by smus Link to comment Share on other sites More sharing options...
CreativHedgehog Posted June 15, 2020 Share Posted June 15, 2020 On 6/13/2020 at 2:13 PM, smus said: Yes, you can, by using pure CSS (not necessarilly with W3.css). Try something like this: <style> .label:after{ content:'text I want to change'; } .label:hover:after{ content:'changed text'; } </style> <body> <p>text <span class="label"></span> text</p> </body> Note: after is a pseudo-element, and should use '::'. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 16, 2020 Share Posted June 16, 2020 Actually it works with either. Link to comment Share on other sites More sharing options...
CreativHedgehog Posted June 19, 2020 Share Posted June 19, 2020 On 6/15/2020 at 1:56 PM, CreativHedgehog said: Note: after is a pseudo-element, and should use '::'. Also, (maybe not found in w3schools tutorials), you can use \A to insert a linebreak. Link to comment Share on other sites More sharing options...
Makwana Prahlad Posted August 14, 2020 Share Posted August 14, 2020 Hello, @gordonisnz Please try this code,To w3css replace text on hover ? HTML Code : <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="involved"><span>share</span> </div> </body> </html> $(document).ready(function(e) { $('.involved').mouseenter(function(){ $(this).find('span').text('Mouse Enter'); }).mouseleave(function(){ $(this).find('span').text('Mouse Leave'); }); }); I hope this code will be useful for you. Thank you Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2020 Share Posted August 14, 2020 (edited) Pity the OP wanted CSS option, why its posted under CSS. Edited August 14, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now