CODEWITHSUNDEEP
javascripthtmlcss
Bobj-C
Bobj-C

Reputation: 5426

Add a CSS that enlarge the value when the mouse hovers over it

I have a table inside an html page created by Javascript and hold number inside its cells i want to enlarge the number when the mouse hovers over it using css style.

Upvotes: 1

Views: 3731

Answers (4)

RussellUresti
RussellUresti

Reputation: 6221

Here's an example: http://jsbin.com/urube4/edit

You can either use the :hover psuedo-selector on the td, or on the span inside, depending on the effect you want.

The first table in the example will only activate the hover on the mouseover of the text, while the second example will activate on the mouseover of the table cell.

As stated, you'll have an issue here with IE6, as it only recognizes :hover on a tags and form elements such as button and input. If you want IE6, you'll need to use JavaScript.

Upvotes: 1

Groovetrain
Groovetrain

Reputation: 3325

I'd do something like:

table td:hover {
  font-size: 1.1em;
}

This way, you're sure to have a bigger font than what's already there.

Upvotes: 3

Headshota
Headshota

Reputation: 21449

table td:hover {
font-size: 14px; // greater than actual size
}

Upvotes: 0

Naftali
Naftali

Reputation: 146360

look into css :hover selector

this mainly works for anchor tags in most browsers, if you want to do hover for other elements you might want to use javascript

Upvotes: 2

Related Questions