Geek Answers Handbook

CSS - hover one element and delete the contents of another element

I work with a Wordpress menu, where I have a classic menu and submenu. When I visit some element that has children, then a submenu will appear. The problem is that when I have the current page, then liclass current-submenu-itemhas an arrow at the bottom of the element. And when I find another element that has a submenu (children), I want this arrow to disappear at the bottom of the current element, and when I unfasten it, the arrow will show again.

The current element class is as follows:

li.current-submenu-item a:after {
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    content: url("http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/menu_aktivni_sipka.png");
}

JsFiddle is here .

I tried something like this:

li.menu-item-has-children:hover + .li.current-submenu-item a:after {
    content:"";
}

But without result. How can I do this only with CSS?

+4
1

+ ( , ~) , :hover ul,

ul:hover li.current-submenu-item a:after {
    content:"";
}
ul:hover li.current-submenu-item:hover a:after {
    content:url("http://.../menu_aktivni_sipka.png");
}

, :hover , , .current-submenu-item

: http://jsfiddle.net/fozuu6hL/1/

list-item ( ), . li.

+5

More articles:


All Articles