CODEWITHSUNDEEP
jqueryhtmlcsstextstyling
user3594463
user3594463

Reputation: 123

How to style text in JQuery?

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('');
});

Upvotes: 3

Views: 5806

Answers (6)

Guido
Guido

Reputation: 387

Try something like 

$('#info').html('<b>Hard drive</b>: Secondary Storage Device');

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

You can't, as long as you're only using plain text as the content. Use HTML instead, and you can style the header as you please:

$('#cd').hover(
  function() {
    $('#info').html('<span class="header">CD:</span> External Secondary Storage Device');
  }, 
  function() {
    $('#info').empty();
  });
.header {
  font-size: larger;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a id="cd" href="#">CD</a>

<div id=info></div>

Upvotes: 1

Riquelmy Melara
Riquelmy Melara

Reputation: 941

Create a class on CSS 

.bold{
font-weight:bold;
}

and then add the class to the #info only on the hover function that you want

$( "#info" ).addClass( "bold" );

Upvotes: 0

Ruben
Ruben

Reputation: 1749

You can use JQuery's $('#info').css(). Using $('#info').css(propertyName) you can retrieve the value of a CSS property, or you can use $('#info').css(propertyName, value) to set it.

If you want your text to be bold, use $('#info').css('font-weight', 'bold').

Upvotes: 0

j08691
j08691

Reputation: 207901

You need to change the HTML and use .html() and not .text().

For example:

$('#info').html('<h3>Hard drive:</h3> Secondary Storage Device');

Upvotes: 4

imbondbaby
imbondbaby

Reputation: 6411

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('');
});

Upvotes: 5

Related Questions