[CSS] Help

[TrueJewix]

Hello, I need help with something.. alright I want the heart (html code

You must be registered for see links

) to go blue after I hover it.

The heart was made using bootstrap (which im using) so I have to make the code by myself.. but I do not know how to make it.

 

[Weasel]

Use. Google.

Add the class heart-hover to the i element you show in the screen.

$('.heart-hover').hover(
function() {
$(this).css('color', '#0000ff');
}, function() {
$(this).css('color', '');
});

 

[TrueJewix]

Use. Google.

Add the class heart-hover to the i element you show in the screen.

$('.heart-hover').hover(
function() {
$(this).css('color', '#0000ff');
}, function() {
$(this).css('color', '');
});

what do I add in the 'this' part?

 

[RastaLulz]

You could use JavaScript to accomplish this, but you should really be using CSS for this:

You must be registered for see links

 

[Weasel]

what do I add in the 'this' part?

Nothing. You only add the heart-hover class to the i element and you put the JavaScript (/jQuery) code in your code. $(this) is a jQuery element. Please, read some tutorials on the internet. You want to make websites, but you put no effort in learning anything yourself.
 
You should go with @Rooster his solution. It's way better.

 

[TrueJewix]

@Exalted
@Rooster
I'm currently using Rooster's method, but it gives me two red hearts

You must be registered for see links

<- html

You must be registered for see links

<- css

You must be registered for see links

<- the acutal site

 

[RastaLulz]

@Exalted
@Rooster
I'm currently using Rooster's method, but it gives me two red hearts

You must be registered for see links

<- html

You must be registered for see links

<- css

You must be registered for see links

<- the acutal site

Show us the entire source..

 

[TrueJewix]

Show us the entire source..

I fixed it. Thank you so much though.

 

[Swaggots]

Use. Google.

Add the class heart-hover to the i element you show in the screen.

$('.heart-hover').hover(
function() {
$(this).css('color', '#0000ff');
}, function() {
$(this).css('color', '');
});

Why use this when it can easily be done in css

 

[Weasel]

Why use this when it can easily be done in css

As I said, I forgot and Rooster's solution is better. Read the entire thread, your comment is unnessecary.

 

[Swaggots]

As I said, I forgot and Rooster's solution is better. Read the entire thread, your comment is unnessecary.

Didn't see the merge, no need for attitude
 
To make the background of the heart a different color on hover, you're gonna have to place it in a class.

// CSS

.heart-holder {
width: 50px;
height: 50px;
background: #000;
}

.heart-holder:hover {
background: #FFF;
}

// HTML

<div class="heart-holder">
<i class="heart or whatever"></i>
</div>