user3442470 user3442470 - 1 year ago 44
CSS Question

hover on class not working

I have the following html:

<div class="box">
<div class="div box_position" id="something" style="some style" onlick="somefunction"</div>

These tags are created dinamically via jquery.

Now I have the following CSS:

.box :hover {

.div box_position :hover{

When I hover on the parent it works, but when I hover the content (the div box position) it doesn't change the color of the border or the font, Im I missing something?

Answer Source

There's a few things...

  • 1 Your border-color is defined incorrectly with the = sign.

You need to define it like so:

border-color: black;
  • 2 Your second style definition is missing a . for the box_position class. Plus, I would change it to box-position to keep with most naming conventions.

You need to define your style like so:

.div .box-position:hover {
    border-color: black;
  • 3 IMHO You don't really need to define a class called div, so you could remove this from the style definition. You could just declare your selector as "something inside a div", "called box-position.

Like so:

div .box-position:hover {
    border-color: black;

This says "anything that's in a div; and has the class of box-position - apply the following style to".

  • 4 Your inner div is missing a closing angle bracket (>)

Should be this:

<div class="div box_position" id="something" style="some style" onlick="somefunction">
Some content

Also, ensure that you are defining a width for your border, unless this is declared elsewhere.

You can define the border's style short-hand, in one line only. Like so:

div .box-position:hover {
    border: 1px solid black; // Give me a 1px border that has a black, solid line

Lastly. I would consider your selectors, and have a look at to familiarise yourself with what selectors mean/do and how to use this.

This will come in great help when you're defining your styles in future.

Hope this helps!