Jump to content

w3css replace text on hover ?


Recommended Posts

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 post
Share on other sites

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 by Raul
Link to post
Share on other sites

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 by smus
Link to post
Share on other sites
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 post
Share on other sites
  • 1 month later...

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...