Jump to content

w3css replace text on hover ?


gordonisnz
 Share

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...