Hover effect on before and after - html

Question

I have the following fiddle:
https://jsfiddle.net/ur9bpgbn/164/
I try to apply a hover effect to the whole arrow with no success.
I have the CSS here:
.arrow {
position: absolute;
font-size: 16px;
max-width: 350px;
background: #FFF;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center;
color: #000;
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
z-index: 999;
}
.arrow.active {
visibility: visible;
opacity: 1;
}
.arrow.active.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.active.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX (5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
/*right arrow*/
.arrow-right {
border-radius: 0px 0px 0 0px;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFF;
opacity: 0.7;
}
.arrow-right:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #FFF;
opacity: 1;
}
/*left arrow*/
.arrow-left {
border-radius: 0 0px 0px 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFF;
opacity: 0.7;
}
.arrow-left:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #FFF;
opacity: 1;
}
.arrow:hover{
background-color: darkblue;
}
<div id="app">
<div href="#" class="arrow arrow-right animate-right-to-left">This is a text</div>
<div href="#" class="arrow arrow-left animate-left-to-right" style="margin-top:30%; margin-left:30%;"><span class="room-desc">This is a text</span></div>
</div>
I found a way to apply hover:after but I don't want the hover effect to apply when the user mouses over the after, I want it the other way around. It should actually cover all the situations, if the user mouses over the main div, the after OR the before it should apply the hover state to all of these.
I tried reading up some documentaton on pseudo elements but I didn't found a working solution yet.
Is this doable?

Answer 1

.arrow:hover:after { } should fire when either the arrow is hovered or the after is hovered (as the after will be inside the arrow element)
$('.arrow').addClass('active')
body{
background: #000;
margin: 20%;
}
.arrow {
position: absolute;
font-size: 16px;
max-width: 350px;
background: #FFF;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center;
color: #000;
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
z-index: 999;
}
.arrow.active {
visibility: visible;
opacity: 1;
}
.arrow.active.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.active.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX (5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
/*right arrow*/
.arrow-right {
border-radius: 0px 0px 0 0px;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFF;
opacity: 0.7;
}
.arrow-right:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #FFF;
opacity: 1;
}
/*left arrow*/
.arrow-left {
border-radius: 0 0px 0px 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFF;
opacity: 0.7;
}
.arrow-left:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #FFF;
opacity: 1;
}
.arrow:hover:after{
border-left-color: red; /* turn arrow red on hover */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<div href="#" class="arrow arrow-right animate-right-to-left">This is a text</div>
<div href="#" class="arrow arrow-left animate-left-to-right" style="margin-top:30%; margin-left:30%;"><span class="room-desc">This is a text</span></div>
</div>

Answer 2

You mean something like this?
.arrow:hover {
background: darkblue;
}
.arrow:hover:before {
border-right: 20px solid darkblue;
}
.arrow:hover:after {
border-left: 20px solid darkblue;
}