Change text on hover, then return to the previous text
Yes, you can use CSS content
. To switch between the normal text and "Reply!", put the normal text in a span
and hide that when hovering.
button {
width: 6em
}
button:hover span {
display: none
}
button:hover:before {
content: "Reply!"
}
<button><span>3 replies</span></button>
How do I change span ID text on hover? (CSS)
If I'm getting it correctly, this is what you want:
span#hUp::before {
content: "sampletext1";
font-size: 13px;
font-family: monospace;
}
span#hUp:hover::before {
content: "sampletext2";
}
<span id="hUp" style="right;margin-right: 5px;margin-top: 3px;font-size: small;">
<a href="mailbox.php?id#">Mailbox</a>
</span>
Jquery text change on hover with transition
$( function() {
var fs = $('h2').text();
var ss = 'my second sentence';
$('h2').hover(function(){
$(this).hide().text(ss).fadeIn("slow");
}, function() {
$(this).hide().text(fs).fadeIn("slow");
});
});
For fadeIn() you need to hide() that element first. I declared two variables not necessary but will help you. var fs
(first sentence) and var ss
(second sentence).
Fiddle
Change Text when hovering over image, text is in a different location then image
If I understand your question, you want a grid of images to the right on the screen, where each image has predefined text that is displayed on the left side of the screen if the user hovers that image.
This can be achieved via CSS and HTML, without any JavaScript as shown below. Please see the comments in the snippet for further explanation:
.grid {
/* Put 50% white space to the left of the image grid
which provides the space for descriptions to appear */
padding-left:50%;
/* Specify a basic grid layout for images in the grid */
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.grid img {
/* Cause each image to not exceed the grid cell's width */
max-width:100%;
}
.grid a p {
/* With width of description cannot exceed half page width. If text
description is too long, this causes it to wrap onto multiple lines
at the 50% point */
width:50%;
/* Fixed position ensures the description is placed at top left of
screen (by default) regardless of scroll position */
position:fixed;
top:0;
left:0;
/* Do not show description by default */
display:none;
}
.grid a:hover p {
/* When hovering the a around an image, cause it's description to
be shown */
display:block;
}
<div class="wrapper">
<div class="grid">
<a href="#">
<p>Pre defined text for blue image</p>
<img src="https://via.placeholder.com/350/00f.png" alt="blue" />
</a>
<a href="#">
<p>Pre defined text for red image</p>
<img src="https://via.placeholder.com/350/f00.png" alt="red" />
</a>
<a href="#">
<p>Pre defined text for green image</p>
<img src="https://via.placeholder.com/350/0f0.png" alt="green" />
</a>
<a href="#">
<p>Pre defined text for yellow image. Lots of text can be specified,
which will wrap on to a new line.</p>
<img src="https://via.placeholder.com/350/ff0.png" alt="green" />
</a>
</div>
</div>
How to change a portion of text on hover with css
CSS only method:
JSFiddle
HTML and CSS:
li a:before {
content:"(855) TRY PETS"
}
li a:hover:before {
content:"(855) 879 7387"
}
<li><a href="#"></a></li>
Change text on hover and replace with original
In the html do this:
<h4><span class="ninja">CLOSE</span><span>OPEN</span></h4>
In your CSS do this:
.ninja { display:none; }
In your JS, do this on the hover (or better yet on('mouseenter,mouseleave') event
$(this).find('span').toggleClass('ninja');
That should get the desired effect.
My suggestion though is instead of using a hover event at all, when the click event fires, toggle the classes then. That way it displays correctly all the time.
EDIT: On the .on() alternative (for mouse-enter, mouse-leave)
$('h4').on('mouseenter,mouseleave',function(){
$(this).find('span').toggleClass('ninja');
});
EDIT EDIT otherwise you're going to have to have a .blur() event as well and that just seems like more code than is necessary here. I suggest replace your .hover with the above .on and live happily ever after.
Related Topics
How to Use Backslashes (\) in a String
Read a File One Line At a Time in Node.Js
Fastest Method to Replace All Instances of a Character in a String
Converting JavaScript Object With Numeric Keys into Array
How to Add Anything in <Head> Through Jquery/Javascript
How to Use the Spacing Utility Classes in Bootstrap
Scrollintoview() Causing the Whole Page to Move
Jquery Drag/Resize with CSS Transform Scale
Check Browser CSS Property Support with JavaScript
What Is the JavaScript ≫≫≫ Operator and How to Use It
Iterating Over Result of Getelementsbyclassname Using Array.Foreach
How to Chain and Share Prior Results With Promises
JavaScript and Operator Within Assignment
What Are Alternatives to Document.Write
Curly Brackets in Arrow Functions