How to style text in JQuery?

Question

I want to make part of my text Bold and bigger than another part of text. But currently with the jquery I'm using the text all turns out the same size, font weight and colour. For example from my first bit on code bellow I want "Hard drive: Secondary Storage Device" to appear. I want Hard Drive to be in bold writing and the header. I want the other half normal font weight an smaller. How do I style this in jquery or css with the code I have?:)

If you can help it would be really appreciated!

Here is my j query:

$('#harddrive').hover(function() {
$('#info').text('Hard drive: Secondary Storage Device');
}, function() {
$('#info').text('');
});

$('#cd').hover(function() {
$('#info').text('CD: External Secondary Storage Device');
}, function() {
$('#info').text('');
});

$('#fan').hover(function() {
$('#info').text('Fan: Used to keep the computer cool');
}, function() {
$('#info').text('');
});

$('#powerblock').hover(function() {
$('#info').text('Power Block: Provides power to the computer');
}, function() {
$('#info').text('');
});

Answer 1

Use .html() instead of .text() if you want to style your text.

Here is an example:

$('#harddrive').hover(function() {
$('#info').html('<h3><b>Hard drive:</b></h3> Secondary Storage Device');
}, function() {
$('#info').html('');
});