<p class="text">Some text</p>
<style>
.text:hover{
color:red;
}
</style>
How can I trigger hover event that text becomes red via js or jquery? I need a solution without adding a new css class.
2 Answers
You need to use hover() function of JQuery with syntax hover( handlerIn, handlerOut ) as you cannot manipulate :hover from JQuery.
$('.text').hover(
function(){
$(this).css('color', 'red');
},
function(){
$(this).css('color', 'black');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">Some text</p>4 Comments
Rory McCrossan
In the question:
I need a solution without adding a new css class.
Ankit Agarwal
@RoryMcCrossan corrected.
Rory McCrossan
True. I suppose in the loosest sense it works, but I think the OP is more asking 'how can I trigger the CSS :hover selector from JS'.
Dmytro Huz
Yeap. I need to trigger :hover but not handle. But still, thank you for try.
Try This:
$(document).ready(function(){
$('.text').hover(function(){
$(this).css('color','red');
},function(){
$(this).css('color','initial');
})
})
$(document).ready(function(){
$('.text').hover(function(){
$(this).css('color','red');
},function(){
$(this).css('color','initial');
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p class="text">Some text</p>5 Comments
Dmytro Huz
Thank but it is not what I need. Check this comment stackoverflow.com/questions/50923177/…
Ehsan
@DmytroHuz, you can't do it.
Dmytro Huz
yeap already saw in duplicate topic. So trying to find another solution now.
Ehsan
@DmytroHuz,good luck.
Dmytro Huz
Thank you, man! =)
I need a solution without adding a new css class.It's not possible then. You cannot invoke the CSS:hoverselector from JS. See this specific answer in the duplicate I marked for more details: stackoverflow.com/a/17244507/519413