CODEWITHSUNDEEP
htmlcsshover
Krishna Krish
Krishna Krish

Reputation: 79

CSS- HOVER affecting two divs

I am a newbie to CSS. I have two divs, div1 and div2.
The div2 is inside div1 and hovering over div1, the circle is transforming to blue back ground as per my requirement.

I have a letter "F" inside the div2. Now, hovering over the div1 while the background color changes to blue, I want the "F" inside the div2 to change to white.

How do I go about doing this?

Upvotes: 2

Views: 6280

Answers (1)

Anonymous
Anonymous

Reputation: 10216

As per your requirements - TRY THIS DEMO

HTML:

<div id="div1"><div id="div2">F</div></div>

CSS:

#div1 {
    position:relative;
    background:red;
    width:400px;
    height:400px;
    line-height:200px;
    border-radius:200px;
    text-align:center;
    font-size:24px;
}
#div1:hover {
    background:blue;
}
#div2 {
    position: absolute;
    background:blue;
    top:100px;
    left:100px;
    width:200px;
    height:200px;
    background-color:lawngreen;
}
#div1:hover #div2 {
    color:white;
}

[EDITED]

As per your below comment: TRY THIS DEMO

Here is the snippet of my doubt jsfiddle.net – Krishna Krish

Upvotes: 5

Related Questions