CODEWITHSUNDEEP
css
SPG
SPG

Reputation: 6197

How to use css hover on a element and its parent container?

Here is the jsfiddle. The HTML:

<div class="myDiv">
    <div class="subDiv">hover me</div>
</div>

The CSS:

.myDiv{
    width: 200px;
    height: 20px;
    border: 5px solid rgba(255,166,9,0.1);
}

.subDiv{
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
}

.subDiv:hover{
    color: #ffa609;
    transition: all 1s;
}

.subDiv:hover.myDiv{
    border: 5px solid rgba(255,166,9,1);    
}

What I want is:
The color of text and orange border will be changed when text is hovered.
My solution is:

.subDiv:hover{
    color: #ffa609;
    transition: all 1s;
}

.subDiv:hover.myDiv{
    border: 5px solid rgba(255,166,9,1);    
}

It seems that only the first hover is working. Could someone tell me why or other solutions? (Pure CSS please)

Upvotes: 1

Views: 8286

Answers (2)

misterManSam
misterManSam

Reputation: 24692

Divs are display: block by default and will expand to take up their parents width. To have the text turn orange only when the text itself is hovered:

  • make the .subDiv display: inline (Depending on your needs, it may be better for this div to be another element such as <a>)

  • center it with text-align: center on the parent

  • change the text color to orange only when the child is hovered:

    .myDiv .subDiv:hover {
   color: #ffa609;
}

Then change the border color of the parent div when it is hovered. Hovering any of its children elements will maintain the hover state:

.myDiv:hover {
   border: 5px solid rgba(255, 166, 9, 1);
}

Complete Example

Notice how the transition is on the .myDiv and it's child inherits the same behaviour with transition: inherit.

.myDiv {
  width: 200px;
  height: 20px;
  border: 5px solid rgba(255, 166, 9, 0.1);
  transition: all 1s;
  text-align: center;
  transition: all 1s;
}
.subDiv {
  text-decoration: underline;
  cursor: pointer;
  display: inline;
  transition: inherit;
}
.myDiv .subDiv:hover {
  color: #ffa609;
}
.myDiv:hover {
  border: 5px solid rgba(255, 166, 9, 1);
}
<div class="myDiv">
  <div class="subDiv">hover me</div>
</div>

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/63jj4p12/2/

Parent selector is not there in css

Instead you can use this on hover of the parent div change its style

.myDiv {
  width: 200px;
  height: 20px;
  border: 5px solid rgba(255, 166, 9, 0.1);
  transition: all 1s;
}
.subDiv {
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}
.myDiv:hover .subDiv {
  color: #ffa609;
  transition: all 1s;
}
.myDiv:hover {
  border: 5px solid rgba(255, 166, 9, 1);
}
<div class="myDiv">
  <div class="subDiv">hover me</div>
</div>

Upvotes: 1

Related Questions