change the class of a div but not the span in it

Question

I have a <div> with a grey border that I am using as a button.

I am using jQuery to change the border color to black when I roll over it (by changing the css class on mouseover ). In the <div> there is also a <span> with my button text.

The trouble is when I roll over the text that picks up the css class change info too and my text then has a black border.

I want to know if there is a way for javascript or jQuery to ignore the <span> text and treat it as if it were not there.

I just want the border color of the button to change, not add a border to my text too.

Any help appreciated!

Answer 1

It seems like your selector when you apply the new style is wrong and includes the content of the span too.

But for all the cosmetics change of the mouse over event please use the css way :) Lot cleaner.

.myClass
{
  // css of the button
}
.myClass:hover
{
  // css of the button when mouse over it.
}

Answer 2

As @Jean-Philippe said, jQuery is not necessary for this, css contains all the functionality you need to change th elook of an element when you're hovering over it.

It can also be done with jQuery but I fail to see what the problem would be.

This jsfiddle demonstrates both methods, neither put a border on the internal span