CODEWITHSUNDEEP
htmlcsshoverpseudo-element
user3548416
user3548416

Reputation: 117

hover on different elements (CSS only solution)

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!

Upvotes: 1

Views: 148

Answers (5)

xtools
xtools

Reputation: 379

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/

Upvotes: 0

Le one
Le one

Reputation: 1

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;
}

Upvotes: 0

Go7hic
Go7hic

Reputation: 1

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;
    }

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

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;
}

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99474

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; }

Upvotes: 4

Related Questions