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

Question

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)

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — , Nov 28 '14 at 03:23

score 1 · Answer 1 · answered Nov 28 '14 at 03:12

1

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>

answered Nov 28 '14 at 03:12

Vitorino fernandes

14,966
2
16
37

is there a solution to put them together with one hover? – SPG Nov 28 '14 at 03:16
the new edition is not good as previous one. because I want to change color when only text is hovered. – SPG Nov 28 '14 at 03:18
`subDiv` is full block with a `width` of `200px` and when you hover anywhere it will change the text color – Vitorino fernandes Nov 28 '14 at 03:19

misterManSam · Answer 2 · 2014-11-28T04:44:19.837

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>

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

2 Answers2

Complete Example