Dead zone for :hover?

It took me a while playtesting to figure out exactly why it was off, at first I thought the sounds weren’t loading or maybe overlapping and clipping… but there is a dead zone (square) that does not recognize my hover… any ideas on where the interference is coming from?

  <div class="gameWrapper">
    <div class="backPlate">
      <div class="pushPad green" onclick="playGreen()" >
        <audio preload="auto"  id="audioG" data-pad="1">      <!-- upper left -->
          <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"/>
        </audio>
      </div>

      <div class="pushPad red" onclick="playRed()" >
        <audio preload="auto"  id="audioR" data-pad="2">      <!-- upper right -->
          <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg"/>
        </audio>
      </div>

      <div class="pushPad yellow" onclick="playYellow()" >
        <audio preload="auto"  id="audioY" data-pad="3">      <!-- lower left -->
          <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg"/>
        </audio>
      </div>

      <div class="pushPad blue" onclick="playBlue()" >
        <audio preload="auto"  id="audioB" data-pad="4">      <!-- lower right -->
          <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg"/>
        </audio>
      </div>
      <div class="startCircle">
     
        <h3>Shall we<br>play a game?</h3>
      </div>
      <div class="centerCircle"></div>
    </div>
  </div>
.startCircle {
  position: absolute;
  top: 148px;
  left: 148px;
  width: 333px;
  height: 333px;
  background: rgba(88, 88, 88, 0.6);
  border: 2px solid #a1a1a1;
  border-radius: 175px;
  z-index: 19;
  display: table;
  
}

.startCircle p,h3 {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  font-family: 'Diplomata', cursive;
  color:rgb(244, 209, 31); 
text-shadow: 4px 4px 2px rgba(0, 0, 0, .6);
}
.startCircle:hover {
  background: rgba(100, 100, 100, 1);
}
.startCircle p,h3:hover{
    color:GreenYellow; 
}

.centerCircle {
  position: absolute;
  top: 140px;
  left: 140px;
  width: 350px;
  height: 350px;
  background: #000;
  border-radius: 175px;
  z-index: 10;
}
.gameWrapper{
  position: relative;
  width:640px;
  margin:0 auto;
  background-color: green;
}
body{
  height: 700px;
  background-color: grey;
}
.backPlate{
  position: absolute;
  padding:3px;
  top:100px;
  width:614px;
  height: 614px;
  z-index:0;
  background-color: #000;
  border-radius: 310px;
}
.pushPad {
  width: 300px;
  height: 300px;
  float: left;
  z-index: 1;
  margin: 3px;
  filter: alpha(opacity=60);
  opacity: .6;
}
.pushPad:hover {
  opacity: 1;
  filter: alpha(opacity=100);

}

.green {
  border-top-left-radius: 300px;
  background-color: green;
}

.red {
  float: left;
  border-top-right-radius: 300px;
  background-color: red;
  clear: right;
}

.yellow {
  float: left;
  border-bottom-left-radius: 300px;
  background-color: yellow;
  clear: left;
}

.blue {
  float: left;
  border-bottom-right-radius: 300px;
  background-color: RoyalBlue;
}

Hi there TurtleWolf1,

this is how I would code it…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html,body {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0; 
 }
body {
    display: table-cell;
    vertical-align: middle;
    background-color: #f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
#container {
    position: relative;
    width: 35em;
    padding-top: 35em;
    border: 0.25em solid #000;
    border-radius: 50%;
    margin: auto;
    background: #000;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
    overflow: hidden;   
 }
.box {
    position: absolute;
    width: 50%;
    height: 50%;
    cursor: pointer;
    transition: 0.75s ease-in-out;
 }
#box1 {
    top: 0 ;
    left: 0;
    background-color: #004d00;
 }
#box1:hover {
    background-color: #008000;
 }
#box2 {
    top: 0 ;
    left: 50%;
    background-color: #900;
 }
#box2:hover {
    background-color: #f00;
 }
#box3 {
    top: 50%;
    left: 0;
    background-color: #990;
 }
#box3:hover {
    background-color: #ff0;
 }
#box4 {
    top: 50% ;
    left: 50%;
    background-color: #273f87;
 }
#box4:hover {
    background-color: #4169e1;
 }
#box5 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border: 0.4em solid #000;
    box-sizing: border-box;
    border-radius: 50%; 
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
    cursor: default;
 }
#box5 div {
    width: 100%;
    height: 100%;
    border: 0.1em solid #a1a1a1;
    border-radius: 50%; 
    box-sizing: border-box;
    background-color: #353535;
    font-family: 'Diplomata', cursive;
    font-size: 1.25em;
    font-weight: bold;
    color:rgb(244, 209, 31);
    text-align: center;
    text-shadow: 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.6);
    transition: 0.75s ease-in-out;
 }
#box5 div:hover {
    background-color: #646464;
    color: #adff2f;
 }
#box5 div span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
#audio {
    position: absolute;
    left: -999em;
 }
@media screen and ( max-width: 37em ) {
#container {
    width: 90%;
    padding-top: 90%;
  }
#box5 div {
    font-size: 0.9em;
  }
 }
</style>

</head>
<body> 
 <div id="container">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
  <div id="box4" class="box"></div>
  <div id="box5" class="box">
   <div>
    <span>Shall we<br>play a game?</span>
   </div>
  </div>
 </div>
 <audio  id="audio" controls></audio>
<script>
(function() {
   'use strict';
   var src=['https://s3.amazonaws.com/freecodecamp/simonSound1.mp3',
            'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3',
            'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3',
            'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3'
           ];
    var el=document.getElementsByClassName('box');
    for ( var c = 0; c < el.length-1; c++ ) {
          el[c].addEventListener('click', playSounds(c), false);
          }
   function playSounds(c) {
      el[c].onclick=function() {
         document.getElementById('audio').src=src[c];
         document.getElementById('audio').play();
       }
      }
}());;
</script>
</body>
</html>

coothead

2 Likes

Thanks coot head, that looks really cool, coothead’s answer

 
 
 
              No problem, you’re very welcome. :sunglasses:
 
              coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.