CODEWITHSUNDEEP
htmlcsshover
Dmitry Malinovsky
Dmitry Malinovsky

Reputation: 301

How can i change style of one element mouseovering on another?

I'm trying to change style of WORK div when hovering at one of the hexagons. I've put them all into a table as a container, but it doesn;t seem to work. Maybe you can give me a hint, thank you.

Example

Upvotes: 1

Views: 55

Answers (3)

Serg
Serg

Reputation: 1367

If I correctly understand your point the answer is "You cannot with current schema."

You shall use + or ~ selector. They works if elements have the same parent so you can apply CSS rule if any of hexagon is hovered but you cannot determine particular one.

Add the rule to your example to see what i'm saying:

*:hover + * > * > .work-box{
     border: solid red;
}

If your elements have the same parent solution is quite simple - Example

There is good site for Russian speakers about ~ selector

Upvotes: 0

Shivam
Shivam

Reputation: 720

This can help you in your problem and if you are not satisfy by this then comment on this post i will try to solve that also.

<div>
    <div class="e" >Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>         
<div class="f">
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>

And use hover like this, .e { width:90px; border-right:1px solid #222; text-align:center; float:left; padding-left:2px; cursor:pointer;

}
.f .e
{
    background-color:#F9EDBE;

}
.e:hover{
   background-color:#FF0000;
}

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

I just answered another question like this (but was specific to a task). I shall use the same example so you can have a look at how it works.

You can do this just using CSS:

HTML:

<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />

<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>

CSS:

.mnrImageH2 {
    position: absolute;
    top:1px;
    left: 0;
    width: 100%;
}
.mnrImageSpan {
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    padding: 10px;
}
h2 {
    color: white;
}
img:hover + h2 {
    color: #000;
}

So using the + selector we can select the h2 when we hover over an img. Take this and do what you need to do with it.

DEMO HERE

Upvotes: 2

Related Questions