CODEWITHSUNDEEP
htmlcss
user8205975
user8205975

Reputation:

Hover Working On Other Div's Except The Middle Row One

I had added a CSS3 hover effect to my divs, and the hover effect is working on the first row and the last one, however, the effect isn't working in the middle row.

If I use Google Chrome's Inspect Element tab and enable the hover effect, the middle row hovers, but when I actually hover over it, it doesn't work.

Here's my code:-

.itemFrame-1Wrap {
  position: absolute;
  margin-left: 18px;
}

.cat-name-1 {
  font-size: 1em;
  color: #ff0000;
  font-family: lato-2;
  margin-left: 5px;
  font-weight: bold;
}

.itemFrame-1 {
  margin-left: 25px;
}

.itemFrame-1:hover {
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.itemname-cat1 {
  font-family: lato-2;
  font-size: 1em;
  color: #ff0000;
}

.cat-1-line {
  width: 2px;
  height: 550px;
  background-color: #ff0000;
  margin-left: 160px;
  position: absolute;
}

.itemimage {
}

.cat-1-line-end {
  width: 2px;
  height: 550px;
  background-color: #ff0000;
  position: absolute;
}

/*Medium Rares Begins Here*/

.itemFrame-2Wrap {
  margin-left: 200px;
  position: absolute;
}

.cat-2-line {
  width: 2px;
  height: 550px;
  background-color: #ffcc00;
  margin-left: 170px;
  position: absolute;
}

.cat-name-2 {
  font-size: 1em;
  color: #ffcc00;
  font-family: lato-2;
  margin-left: -15px;
  font-weight: bold;
}

.itemFrame-2 {
  margin-left: 25px;
}

.itemFrame-2:hover {
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.itemname-cat2 {
  font-family: lato-2;
  font-size: 1em;
  color: #ffcc00;
}

.cat-2-line-end {
  width: 2px;
  height: 550px;
  background-color: #ffcc00;
  margin-left: 340px;
  position: absolute;
}

/*Medium Rares Ends Here*/

/*Low Rares Begins Here*/

.itemFrame-3Wrap {
  margin-left: 200px;
  position: absolute;
}

.cat-3-line {
  width: 2px;
  height: 550px;
  background-color: #bfff00;
  margin-left: 350px;
  position: absolute;
}

.cat-name-3 {
  font-size: 1em;
  color: #bfff00;
  font-family: lato-2;
  margin-left: 176px;
  font-weight: bold;
}

.itemFrame-3 {
  margin-left: 205px;
}

.itemFrame-3:hover {
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.itemname-cat3 {
  font-family: lato-2;
  font-size: 1em;
  color: #bfff00;
}

.cat-3-line-end {
  width: 2px;
  height: 550px;
  background-color: #bfff00;
  margin-left: 523px;
  position: absolute;
}
<html>

<head>
  <title>New Stick Run Item Ranking List</title>
  <link rel="stylesheet" type="text/css" href="static/rankingDesignNew3.css">
</head>

<body>
  <div class="fullwrap">
    <!--CAT 1 BEGINS HERE-->
    <div class="cat-1-line"></div>
    <div class="itemFrame-1Wrap">
      <p class="cat-name-1">High Worth Rares</p>
      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="itemimage" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>

      </div>
    </div>
    <div class="cat-1-line-end"></div>
    <!-- CAT 1 ENDS HERE -->
    <!-- ++++ -->
    <!-- ++++ -->
    <!-- CAT 2 STARTS HERE -->
    <div class="cat-2-line"></div>
    <div class="itemFrame-2Wrap">
      <p class="cat-name-2">Medium Worth Rares</p>
      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="itemimage" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>

      </div>
    </div>
    <div class="cat-2-line-end"></div>
    <!-- CAT 2 ENDS HERE -->

    <!---------------------------DIVIDER------------------------------------------->

    <!--CAT 3 BEGINS HERE-->
    <div class="cat-3-line"></div>
    <div class="itemFrame-3Wrap">
      <p class="cat-name-3">Low Worth Rares</p>
      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="itemimage" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>

      </div>
    </div>
    <div class="cat-3-line-end"></div>
    <!-- CAT 3 ENDS HERE -->
    <!-- ++++ -->
    <!-- ++++ -->
  </div>

Upvotes: 1

Views: 50

Answers (2)

Michael Coker
Michael Coker

Reputation: 53694

I would remove all of your absolute positioning, and the .cat-*-line* classes, make the parent display: flex and use border on the .itemFrame-*Wrap elements for your left/right borders. 

.cat-name-1 {
  font-size: 1em;
  color: #ff0000;
  font-family: lato-2;
  margin-left: 5px;
  font-weight: bold;
}

.itemFrame-1:hover {
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.itemname-cat1 {
  font-family: lato-2;
  font-size: 1em;
  color: #ff0000;
}

.cat-1-line {
  width: 2px;
  height: 550px;
  background-color: #ff0000;
}

/*Medium Rares Begins Here*/

.cat-2-line {
  width: 2px;
  height: 550px;
  background-color: #ffcc00;
}

.cat-name-2 {
  font-size: 1em;
  color: #ffcc00;
  font-family: lato-2;
  font-weight: bold;
}

.itemFrame-2:hover {
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.itemname-cat2 {
  font-family: lato-2;
  font-size: 1em;
  color: #ffcc00;
}

/*Medium Rares Ends Here*/

/*Low Rares Begins Here*/

.cat-3-line {
  width: 2px;
  height: 550px;
  background-color: #bfff00;
}

.cat-name-3 {
  font-size: 1em;
  color: #bfff00;
  font-family: lato-2;
  font-weight: bold;
}

.itemFrame-3:hover {
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.itemname-cat3 {
  font-family: lato-2;
  font-size: 1em;
  color: #bfff00;
}


.fullwrap {
  display: flex;
}

.item {
  margin-right: 8px;
  border: solid;
  border-width: 0 2px;
  height: 550px;
  padding: 0 18px;
}

.itemFrame-3Wrap {
  border-color: #bfff00;
}

.itemFrame-2Wrap {
  border-color: #ffcc00;
}

.itemFrame-1Wrap {
  border-color: #ff0000;
}
<html>

<head>
  <title>New Stick Run Item Ranking List</title>
  <link rel="stylesheet" type="text/css" href="static/rankingDesignNew3.css">
</head>

<body>
  <div class="fullwrap">
    <!--CAT 1 BEGINS HERE-->
    <div class="itemFrame-1Wrap item">
      <p class="cat-name-1">High Worth Rares</p>
      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="itemimage" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>
      </div>

      <div class="itemFrame-1">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat1">Item Name</p>

      </div>
    </div>
    <!-- CAT 1 ENDS HERE -->
    <!-- ++++ -->
    <!-- ++++ -->
    <!-- CAT 2 STARTS HERE -->
    <div class="itemFrame-2Wrap item">
      <p class="cat-name-2">Medium Worth Rares</p>
      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="itemimage" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>
      </div>

      <div class="itemFrame-2">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat2">Item Name</p>

      </div>
    </div>
    <!-- CAT 2 ENDS HERE -->

    <!---------------------------DIVIDER------------------------------------------->

    <!--CAT 3 BEGINS HERE-->
    <div class="itemFrame-3Wrap item">
      <p class="cat-name-3">Low Worth Rares</p>
      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="itemimage" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>
      </div>

      <div class="itemFrame-3">
        <img class="iteminner" src="static/images/red.png">
        <p class="itemname-cat3">Item Name</p>

      </div>
    </div>
    <!-- CAT 3 ENDS HERE -->
    <!-- ++++ -->
    <!-- ++++ -->
  </div>

Upvotes: 2

Bhavin Shah
Bhavin Shah

Reputation: 2482

   .itemFrame-1Wrap {
    position: absolute;
    margin-left: 18px;
}

.cat-name-1 {
    font-size: 1em;
    color: #ff0000;
    font-family: lato-2;
    margin-left: 5px;
    font-weight: bold;
}

.itemFrame-1 {
    margin-left: 25px;

}

.itemFrame-1:hover {
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}

.itemname-cat1 {
    font-family: lato-2;
    font-size: 1em;
    color: #ff0000;
}

.cat-1-line {
    width: 2px;
    height: 550px;
    background-color: #ff0000;
    margin-left: 160px;
    position: absolute;
}

.itemimage {
}

.cat-1-line-end {
    width: 2px;
    height: 550px;
    background-color: #ff0000;
    position: absolute;
}


/*Medium Rares Begins Here*/

.itemFrame-2Wrap {
    margin-left: 200px;
    position: absolute;
}

.cat-2-line {
    width: 2px;
    height: 550px;
    background-color: #ffcc00;
    margin-left: 170px;
    position: absolute;
}

.cat-name-2 {
    font-size: 1em;
    color: #ffcc00;
    font-family: lato-2;
    margin-left: -15px;
    font-weight: bold;
}

.itemFrame-2 {
    margin-left: 25px;
}

.itemFrame-2:hover {
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}

.itemname-cat2 {
    font-family: lato-2;
    font-size: 1em;
    color: #ffcc00;
}

.cat-2-line-end {
    width: 2px;
    height: 550px;
    background-color: #ffcc00;
    margin-left: 340px;
    position: absolute;

}

/*Medium Rares Ends Here*/

/*Low Rares Begins Here*/

.itemFrame-3Wrap {
    margin-left: 200px;
    //position: absolute;
}

.cat-3-line {
    width: 2px;
    height: 550px;
    background-color: #bfff00;
    margin-left: 350px;
    position: absolute;
}

.cat-name-3 {
    font-size: 1em;
    color: #bfff00;
    font-family: lato-2;
    margin-left: 176px;
    font-weight: bold;
}

.itemFrame-3 {
    margin-left: 205px;
}

.itemFrame-3:hover {
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}

.itemname-cat3 {
    font-family: lato-2;
    font-size: 1em;
    color: #bfff00;
}

.cat-3-line-end {
    width: 2px;
    height: 550px;
    background-color: #bfff00;
    margin-left: 523px;
    position: absolute;

}
  <div class="fullwrap">
  <!--CAT 1 BEGINS HERE-->
  <div class="cat-1-line"></div>
  <div class="itemFrame-1Wrap">
  <p class="cat-name-1">High Worth Rares</p>  
  <div class="itemFrame-1">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat1">Item Name</p>  
  </div>
  
    <div class="itemFrame-1">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat1">Item Name</p>  
  </div>
  
    <div class="itemFrame-1">
    <img class="itemimage" src="static/images/red.png">
    <p class="itemname-cat1">Item Name</p>  
  </div>
  
    <div class="itemFrame-1">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat1">Item Name</p>  
  </div>
  
    <div class="itemFrame-1">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat1">Item Name</p>
    
  </div>
  </div>
  <div class="cat-1-line-end"></div>
  <!-- CAT 1 ENDS HERE -->
  <!-- ++++ -->
  <!-- ++++ -->
  <!-- CAT 2 STARTS HERE -->
    <div class="cat-2-line"></div>
  <div class="itemFrame-2Wrap">
  <p class="cat-name-2">Medium Worth Rares</p>  
  <div class="itemFrame-2">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat2">Item Name</p>  
  </div>
  
    <div class="itemFrame-2">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat2">Item Name</p>  
  </div>
  
    <div class="itemFrame-2">
    <img class="itemimage" src="static/images/red.png">
    <p class="itemname-cat2">Item Name</p>  
  </div>
  
    <div class="itemFrame-2">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat2">Item Name</p>  
  </div>
  
    <div class="itemFrame-2">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat2">Item Name</p>
    
  </div>
  </div>
  <div class="cat-2-line-end"></div>
  <!-- CAT 2 ENDS HERE -->
  
  <!---------------------------DIVIDER------------------------------------------->
  
    <!--CAT 3 BEGINS HERE-->
  <div class="cat-3-line"></div>
  <div class="itemFrame-3Wrap">
  <p class="cat-name-3">Low Worth Rares</p>  
  <div class="itemFrame-3">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat3">Item Name</p>  
  </div>
  
    <div class="itemFrame-3">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat3">Item Name</p>  
  </div>
  
    <div class="itemFrame-3">
    <img class="itemimage" src="static/images/red.png">
    <p class="itemname-cat3">Item Name</p>  
  </div>
  
    <div class="itemFrame-3">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat3">Item Name</p>  
  </div>
  
    <div class="itemFrame-3">
    <img class="iteminner" src="static/images/red.png">
    <p class="itemname-cat3">Item Name</p>
    
  </div>
  </div>
  <div class="cat-3-line-end"></div>
  <!-- CAT 3 ENDS HERE -->
  <!-- ++++ -->
  <!-- ++++ -->
  </div>

I have removed position:absolute from itemFrame-3Wrap class. It works for me.

Hope this helps.

Upvotes: 0

Related Questions