hover on different elements (CSS only solution)

Question

I'm having troubles on applying a hover effect on different HTML elements, such as changing the color of a DIV's border and it's parents DIV's background color.

My HTML code looks like this:

<div id="time-later">
   <div class="time-arrow"></div>
   <p>later</p>
</div>

The matching CSS code:

#time-later {
   height: 35px;
   width: calc(25% - (15px/4));
}

#time-later p {
   display: block;
   width: calc(100% - 14.5px);
   margin-right: 14.5px;
}

#time-later .time-arrow {
   float: right;
   width: 0;
   height: 0;
   border-top: 17.5px solid transparent;
   border-left: 14.5px solid green;
   border-bottom: 17.5px solid transparent;
   z-index: 1;
}

some styling

#time-later p {
   text-align: center;
   line-height: 35px;
   background-color: green;
}

#time-later p:hover {
   background-color: red;
}

#time-later p:active {
   color: #FFF;
   background-color: gray;
}

When I move the mouse over the #time-later element I want the background of the p-element and the border of the .arrow-element to be colored in the same color.

JSFiddle

hover effect on different elements

Is there any CSS-only solution to achieve something like this? I know it would be easier to place an image instead, but I'm searching for a CSS-only solution. Thank you for your help!

Hashem Qolami · Accepted Answer · 2014-10-23 09:14:47Z

4

Move :hover and :active to the parent element, then target the children as follows:

Example Here

#time-later:hover > p { background-color: red; }
#time-later:hover > .time-arrow { border-left-color: red; }

#time-later:active > p { background-color: gray; color: white; }
#time-later:active > .time-arrow { border-left-color: gray; }

answered Oct 23, 2014 at 9:14

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

JSBIN

Through modify their parent pseudo-style to handle what you want.

css

#time-later:hover p{
   background-color: red;
}
#time-later:hover .time-arrow{
   border-left: 14.5px solid red;
}     
#time-later:active p {
   color: #FFF;
   background-color: gray;
}
#time-later:active .time-arrow{
  border-left: 14.5px solid gray;
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 23, 2014 at 9:15

Todd Mark

1,88513 silver badges25 bronze badges

Comments

Go7hic · Accepted Answer · 2014-10-23 09:24:23Z

0

like this? http://jsfiddle.net/z0vm0nm4/1/

  #time-later:hover p{
       background-color: red;
    }
    #time-later:hover .time-arrow {
       border-left: 14.5px solid red;
    }

answered Oct 23, 2014 at 9:24

Go7hic

12 bronze badges

Comments

Le one · Accepted Answer · 2014-10-23 09:24:39Z

0

you can do hover on div example:

div#time-later:hover .time-arrow{
   border-top: 17.5px solid transparent;
   border-left: 14.5px solid background:tan;
   border-bottom: 17.5px solid transparent;
}

div#time-later:hover p{
   background:tan;
}

answered Oct 23, 2014 at 9:24

Le one

12 bronze badges

Comments

xtools · Accepted Answer · 2014-10-23 09:35:46Z

0

try this one, worked for me:

/* some stylings */

#time-later p {
   text-align: center;
   line-height: 35px;
   background-color: green;
}

#time-later:hover p {
   background-color: red;
}

#time-later:active p {
   color: #FFF;
   background-color: gray;
}

#time-later:hover .time-arrow {
   border-left: 14.5px solid red;
}

#time-later:active .time-arrow {
border-left: 14.5px solid gray;
}

http://jsfiddle.net/h50L9noy/

answered Oct 23, 2014 at 9:35

xtools

3793 silver badges15 bronze badges

Collectives™ on Stack Overflow

hover on different elements (CSS only solution)

5 Answers 5

Comments

JSBIN

css

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

css

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related