atherir atherir - 28 days ago 8
CSS Question

HTML/CSS: Hover function not working

The hover function, instead of applying it's effect when I hover the div with my mouse, is happening as soon as I open/refresh the .html file, and hovering it has no effect. The code is the same as a working hover function, I do not understand why it isn't working when I hover but instead on page refresh.

Any suggestions?

Here's the HTML:

(...)<div class="firstInbetween">
<div class="insideInbetween" style="cursor: pointer">
<p>TRADE</p>
</div>
</div> (...)


And here is the CSS:

.insideInbetween {
background: #5D7075;
width: 60px;
font-family: 'Open Sans';
font-size: 20px;
text-align: center;
border: 2px solid red;
padding: 25px;
margin: auto;
margin-top: 50px;
color: #333333;
-o-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-khtml-transition: background 0.5s linear;
-webkit-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
transition: background 0.5s linear;
}


.insideInbetween:hover {
background: #b50000;
}


Thanks in advance!

EDIT: Here's the full file so you can check it out: https://jsfiddle.net/arxs6b66/

Answer

.insideInbetween {
  background: #5D7075;
  width: 60px;
  font-family: 'Open Sans';
  font-size: 20px;
  text-align: center;
  border: 2px solid red;
  padding: 25px;
  margin: auto;
  margin-top: 50px;
  color: #333333;
  -o-transition: background 0.5s linear;
  -moz-transition: background 0.5s linear;
  -khtml-transition: background 0.5s linear;
  -webkit-transition: background 0.5s linear;
  -ms-transition: background 0.5s linear;
  transition: background 0.5s linear;
}


} /* <-- DELETE THIS*/
.insideInbetween:hover {
  background: #b50000;
}
.secondInside {
  background-color: #123189;
  color: white;
  width: 35%;
  float: left;
  height: 500px;
  margin: 2%;
}

in the complete jds theres a { before the hover, just delete it and it works

Comments