CODEWITHSUNDEEP
css
Juan Jardim
Juan Jardim

Reputation: 2252

How to keep hover effect only on the parent

I'm developing a css Tree view and I want, if is possible, to keep the hover effect only on the element that has children: 

    <ul>
      <li><span>Item 1</span>
        <ul>
          <li><span>Item 1.1</span></li>
          <li><span>Item 1.2</span></li>
          <li><span>Item 1.3</span></li>
        </ul>
      </li>
    </ul>

What I've done in css was:

.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

but this doesn't work like I expected.

Upvotes: 3

Views: 2076

Answers (3)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

You want the :hover effect only inside the "Item 1" right?

.treeview > ul > li:hover > span {
    color: red;
}

Also check this Fiddle.

UPDATED (based on your comment)

.treeview  li:hover > span {
    color: red;
}

And updated Fiddle. This however will also trigger the span on "Item 1.1.1" when hovered...

Upvotes: 4

Kierchon
Kierchon

Reputation: 2289

I think this is what you want. I added another larger li in my fiddle so you can see.

.treeview ul>li>span:hover {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}
.treeview ul>li>span ~ ul>li>span:hover {
    background:#fff;
    border:none;
    color:#000
}

Demo:http://jsfiddle.net/QdEEf/1/

Edit: Actually If im truly understanding your question. Youre looking for a way to determine if the li has a ul as a child then give that li a hover if it does. If this is the case youre gonna need to use javascript to determine if it has a ul child. There is no way to do this with CSS

Upvotes: 0

Defoncesko
Defoncesko

Reputation: 687

Is that what you want ?

http://jsfiddle.net/Defoncesko/p63b9/

HTML

<div class="treeview">
        <ul>
          <li><span>Item 1</span>
            <ul>
              <li><span>Item 1.1</span></li>
              <li><span>Item 1.2</span></li>
              <li><span>Item 1.3</span></li>
            </ul>
          </li>
        </ul>
</div>

CSS

  ul ul li:hover {
        background-color:#eee;
        border:1px solid #94a0b4;
        color:#000
    }

Upvotes: 0

Related Questions