Change Text on Hover, Then Return to the Previous Text

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



Leave a reply



Submit