How can I affect a non-child element on hover?

Question

So I'm trying to make it so that when you hover a list item, it changes the color of the corresponding svg shape. Since these are elements in separate divs is it possible to do this with just css?

Here's a Codepen of what I have so far: http://codepen.io/rewerbj/pen/LVLRaK

Would I then have to give each svg section a different class name?

I've tried:

.region-list li:hover + .map-shape {
    fill: #213A46;
}

That didn't work so I'm not sure if I'm going to have to use jQuery and if so what the most dynamic way to do this would be.

Any suggestions are welcome. Thank you!

based on the html, the title question should be, how can I affect a parents sibling on hover of said parents child, which isn't possible via css alone — Rooster, Jun 10 '15 at 18:45
I don't think you can do this with pure CSS but it should be fairly easy with a litte jQuery. — Tanel Eero, Jun 10 '15 at 18:55
In [CSS selectors level 4](http://dev.w3.org/csswg/selectors-4/#relational) we'll be able to use `.region-list:has(li:nth-of-type(1):hover) + .region-map > svg:nth-of-type(1)` to match the first SVG element only if the first LI within the region list is hovered. But as of now it is not supported in any common web browsers. — Hashem Qolami, Jun 10 '15 at 19:11

score 0 · Answer 1 · answered Jun 10 '15 at 19:06

0

You can not do this since the (+) sibling operator only works in adjacent div.

so to achieve this effect either

you have to change your HTML in such a way so that shape comes just after the menu

or you have to use Jquery

answered Jun 10 '15 at 19:06

vasu naman

11
4

score 0 · Answer 2 · edited May 23 '17 at 12:22

If you want to do this with CSS only you would have to restructure your titles to be adjacent to your SVG map pieces using the + operator (you can read more about that here). Here is an example of your code if you decide to go this route.

HTML

<div class="region-map-wrap">
    <div class="region-map">
        <div class="title1"><span class="num">1</span><span class="city">one</span></div>
        <svg class="item1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="97.907px" height="102.533px" viewBox="0 0 97.907 102.533" enable-background="new 0 0 97.907 102.533"
             xml:space="preserve">
        <g>
            <polygon class="map-shape" fill="#009A8B" stroke="#000000" stroke-miterlimit="10" points="4.559,101.959 0.513,25.768 33.772,0.623 97.33,47.07
                84.834,90.274   "/>
            <circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="43.626" cy="55.002" r="24.27"/>
            <text transform="matrix(1 0 0 1 35.839 65.252)" fill="#FFFFFF" font-family="'OpenSans'" font-size="28.0337">1</text>
        </g>
        </svg>
    </div>
</div>

CSS

.title1 {
    font-size: 18px;
    font-family: verdana;
}

.title1:hover + .item1 .map-shape {
    fill: #213A46;
}

Also added a JS.Fiddle if you want to play with it. Notice that the title is now just above your SVG item.

EDIT: Messed around with JQuery using this Fiddle and you can hover SVG elements by setting the Attribute Fill element to a hexadecimal value.

$('.region-list .item').hover(function(){
    $(this).addClass('active');
    $('.region-map .map-shape').attr("fill", "#ff0000");
}, function(){
    $(this).removeClass('active');
    $('.region-map .map-shape').attr("fill", "#009A8B");
});

How can I affect a non-child element on hover?

2 Answers2