Hover event that works in javascript and not in css

Question

Hover event that works in javascript and not in css

Navigation

#1 by (1 votes)

0

I have a div with a background image, inside that div I have a div with position:absolute .

What I want to do is that when I pass the mouse for the div container the edge of the div that is inside is painted in white, until there all perfect.

But then I want that when you pass mouse for the div that is inside, the edge of this is painted in another color.

But I can not achieve that, at least with CSS . Try it with Javascript and if you can, but I prefer to avoid using Javascript for this.

Someone who can tell me: what am I doing wrong?

This is my code:

.figure {
  position: relative;
  width: 15.1%;
  display: inline-block;
  vertical-align: middle;
  left: 3.9%;
  right: 3.9%;
  text-align: center;
  padding: 11% 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  z-index: 0;
}

.circulo {
  position: absolute;
  width: 70%;
  height: 50%;
  max-height: 140px;
  max-width: 140px;
  left: 0px;
  right: 0px;
  margin: auto;
  top: 0px;
  bottom: 0px;
  border-radius: 50%;
  z-index: 20;
  border: solid 8px transparent;
}

.figure:hover .circulo {
  border: 8px solid rgba(225, 225, 225, 0.6);
}

.circulo:hover {
  border: 8px solid rgba(255, 255, 255, 1.00)
}

<div class="figure" style="background-image:url(images/image)">
  <div class="circulo"></div>
</div>

javascript css3 css

asked by Orlando Pasaca Rojas 10.01.2018 в 21:42

source

1 answer

Create an update from an if or a case in sql or postgresql How to do Repeat events on fullCalendar [closed]

score 1 · Accepted Answer

The problem is that the selector .circulo:hover is less specific than .figure:hover .circulo and prevails the latter.

Changing the selector by .figure .circulo:hover will work perfectly.

In the following example I added a background color to .figure to make the effect clearer:

.figure {
  position: relative;
  width: 15.1%;
  display: inline-block;
  vertical-align: middle;
  left: 3.9%;
  right: 3.9%;
  text-align: center;
  padding: 11% 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  z-index: 0;
  background-color: #333333;
}

.circulo {
  position: absolute;
  width: 70%;
  height: 50%;
  max-height: 140px;
  max-width: 140px;
  left: 0px;
  right: 0px;
  margin: auto;
  top: 0px;
  bottom: 0px;
  border-radius: 50%;
  z-index: 20;
  border: solid 8px transparent;
}

.figure:hover .circulo {
  border: 8px solid rgba(225, 225, 225, 0.6);
}

.figure .circulo:hover {
  border: 8px solid rgba(255, 255, 255, 1.00)
}

<div class="figure" style="background-image:url(images/image)">
  <div class="circulo"></div>
</div>