悬停在其他Div上工作除了中间一行

时间：2017-06-23 15:35:24

标签： html css css3

我已经为我的div添加了一个CSS3悬停效果，并且悬停效果在第一行和最后一行上有效，但是效果在中间行不起作用。

如果我使用谷歌浏览器的“检查元素”选项卡并启用悬停效果，则中间行会悬停，但当我实际悬停在其上时，它不起作用。

这是我的代码： - 

.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>

2 个答案:

答案 0 :(得分：2)

我会删除您的所有绝对定位，.cat-*-line*类，使父display: flex和border元素使用.itemFrame-*Wrap为您的左/右边界。 

.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>

答案 1 :(得分：0)

<script src='paginator.js'></script>

   .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>课程中删除了position:absolute。它对我有用。

希望这有帮助。

相关问题
最新问题