CSS位置在悬停时无法正常工作

时间：2017-03-14 04:47:47

标签： html css css3 css-position z-index

我尝试{另一个div上的position div 当我将鼠标悬停在.lg-each-contest上时，.current-caption会出现。 当悬停在.time上时，.current-caption悬停将是相同的。

这是我的代码

＆＃13;
＆＃13; 
.lg-current-inner {
  border: 1px solid #bdbdbd;
  margin-bottom: 30px;
  position: relative;
}

.lg-each-contest:hover .current-caption {
  opacity: 1;
}

.lg-current-banner .amount {
  position: absolute;
  top: 5px;
  background-color: #fea700;
  padding: 5px 12px;
  font-size: 22px;
  right: 0;
  font-weight: 600;
  color: #fff;
}

.lg-current-content {
  padding: 10px;
}

.lg-current-content h3 {
  font-size: 24px;
  line-height: 36px;
  margin-top: 10px;
}

.time {
  border-top: 1px solid #bdbdbd;
  position: relative;
}

.time .remaning-time {
  padding: 10px;
}

.time .remaning-time .each-time {
  font-size: 14px;
  font-weight: 500;
}

.time .remaning-time .submissions {
  padding: 2px 10px;
  background: #1bcd80;
  font-weight: 500;
  color: #fff;
  border-radius: 2px;
}

.current-caption {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  right: 0;
  bottom: 0;
  padding: 25% 0;
  width: 100%;
  height: 100%;
  background-color: rgba(63, 97, 132, 0.5);
  text-align: center;
  font-size: 15px;
  opacity: 0;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.current-caption button {
  color: #fea700;
  padding: 6px 20px;
  opacity: 1;
  border-radius: 4px;
  background: #fff;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  top: 50%;
  outline-color: transparent;
  border: none;
}

.current-caption button:hover {
  border-color: transparent;
  border: none;
}

.current-caption button:focus {
  border-color: transparent;
  border: none;
}

.current-caption button .fa {
  margin-right: 5px;
}

.seclected {
  display: none;
}
＆＃13; 
<div class="lg-current-inner">
  <div class="lg-each-contest">
    <div class="lg-current-banner">
      <img src="assets/images/gl-1.jpg" alt="" class="img-responsive">
      <span class="amount">$130</span>
    </div>
    <div class="lg-current-content">
      <h3>Logo Name here</h3>
      <p>We are looking for a clean logol company strickt.</p>
    </div>
    <div class="current-caption">
      <button class="select-btn">
          <span class="select">Select</span>
          <span class="seclected select">Selected</span>
        </button>
    </div>
  </div>
  <div class="time">
    <div class="remaning-time">
      <span class="each-time"> 25 Days 13 Hours 00 min</span>
      <span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

检查演示：http://codepen.io/anon/pen/MpoMad?editors=1100

提前谢谢。

3 个答案:

答案 0 :(得分：2)

我希望这就是你要找的东西。为你的div添加一个z-index，这将避免该文本出现在悬停div上，以及填充似乎是不必要的我也删除了。

<!DOCTYPE html>
<html>

<head>
<style>
    .lg-current-inner {
        border: 1px solid #bdbdbd;
        margin-bottom: 30px;
        position: relative;
    }
    
    .lg-each-contest {
        overflow: hidden;
        position: relative;
    }
    
    .lg-each-contest:hover .current-caption {
        opacity: 1;
    }
    
    .lg-current-banner .amount {
        position: absolute;
        top: 5px;
        background-color: #fea700;
        padding: 5px 12px;
        font-size: 22px;
        right: 0;
        font-weight: 600;
        color: #fff;
    }
    
    .lg-current-content {
        padding: 10px;
    }
    
    .lg-current-content h3 {
        font-size: 24px;
        line-height: 36px;
        margin-top: 10px;
    }
    
    .time {
        border-top: 1px solid #bdbdbd;
        position: relative;
    }
    
    .time .remaning-time {
        padding: 10px;
    }
    
    .time .remaning-time .each-time {
        font-size: 14px;
        font-weight: 500;
    }
    
    .time .remaning-time .submissions {
        padding: 2px 10px;
        background: #1bcd80;
        font-weight: 500;
        color: #fff;
        border-radius: 2px;
    }
    
    .current-caption {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        right: 0;
        bottom: 0;
        /*padding: 25% 0;*/
        z-index: 10000;
        width: 100%;
        height: 100%;
        background-color: rgba(63, 97, 132, 0.5);
        text-align: center;
        font-size: 15px;
        opacity: 0;
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        -o-transition: all 0.4s ease-out;
        -ms-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .current-caption button {
        color: #fea700;
        padding: 6px 20px;
        opacity: 1;
        border-radius: 4px;
        background: #fff;
        font-weight: 600;
        font-size: 16px;
        position: relative;
        top: 50%;
        outline-color: transparent;
        border: none;
    }
    
    .current-caption button:hover {
        border-color: transparent;
        border: none;
    }
    
    .current-caption button:focus {
        border-color: transparent;
        border: none;
    }
    
    .current-caption button .fa {
        margin-right: 5px;
    }
    
    .seclected {
        display: none;
    }
</style>
</head>

<body>
<div class="col-sm-3 wow fadeInRight" data-wow-delay="0.2s">
    <div class="lg-current-inner">
        <div class="lg-each-contest">
            <div class="lg-current-banner">
                <img src="assets/images/gl-1.jpg" alt="" class="img-responsive">
                <span class="amount">$130</span>
            </div>
            <div class="lg-current-content">
                <h3>Logo Name here</h3>
                <p>We are looking for a clean logo that pops apparel company strickt.</p>
            </div>
            <div class="current-caption">
                <button class="select-btn">
                    <span class="select">Select</span>
                    <span class="seclected select"><i class="fa fa-check-circle"></i>Selected</span>
                </button>
            </div>
        </div>
        <div class="time">
            <div class="remaning-time">
                <span class="each-time"><i class="fa fa-calendar"></i> 25 Days 13 Hours 00 min</span>
                <span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span>
            </div>
        </div>
    </div>
</div>
</body>

</html>

修改。

为overflow: hidden课程设置position: relative和lg-each-contest。这将停止悬停div的溢出。我已经更新了代码。

答案 1 :(得分：0)

我不知道你在问什么。但是当我运行代码时，我看到光标没有显示按钮上的指针。我只是在 CSS 文件中添加了一些代码。

.current-caption button {
   + cursor: pointer;
}

.current-caption button:hover {
   + background: #000;
}

答案 2 :(得分：0)

当.current-caption仅悬停

时，

.lg-each-contest必须位于首位

＆＃13;
＆＃13; 
.lg-current-inner {
  border: 1px solid #bdbdbd;
  margin-bottom: 30px;
  position: relative;
}

.lg-each-contest:hover .current-caption {
  opacity: 1;
  z-index:2; /* added */
}

.lg-current-banner .amount {
  position: absolute;
  top: 5px;
  background-color: #fea700;
  padding: 5px 12px;
  font-size: 22px;
  right: 0;
  font-weight: 600;
  color: #fff;
}

.lg-current-content {
  padding: 10px;
}

.lg-current-content h3 {
  font-size: 24px;
  line-height: 36px;
  margin-top: 10px;
}

.time {
  border-top: 1px solid #bdbdbd;
  position: relative;
}

.time .remaning-time {
  padding: 10px;
}

.time .remaning-time .each-time {
  font-size: 14px;
  font-weight: 500;
}

.time .remaning-time .submissions {
  padding: 2px 10px;
  background: #1bcd80;
  font-weight: 500;
  color: #fff;
  border-radius: 2px;
}

.current-caption {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  right: 0;
  bottom: 0;
  /*padding: 25% 0;*/ /* removed */
  width: 100%;
  height: 100%;
  background-color: rgba(63, 97, 132, 0.5);
  text-align: center;
  font-size: 15px;
  opacity: 0;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.current-caption button {
  color: #fea700;
  padding: 6px 20px;
  opacity: 1;
  border-radius: 4px;
  background: #fff;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  top: 50%;
  outline-color: transparent;
  border: none;
}

.current-caption button:hover {
  border-color: transparent;
  border: none;
}

.current-caption button:focus {
  border-color: transparent;
  border: none;
}

.current-caption button .fa {
  margin-right: 5px;
}

.seclected {
  display: none;
}
＆＃13; 
<div class="lg-current-inner">
  <div class="lg-each-contest">
    <div class="lg-current-banner">
      <img src="assets/images/gl-1.jpg" alt="" class="img-responsive">
      <span class="amount">$130</span>
    </div>
    <div class="lg-current-content">
      <h3>Logo Name here</h3>
      <p>We are looking for a clean logol company strickt.</p>
    </div>
    <div class="current-caption">
      <button class="select-btn">
          <span class="select">Select</span>
          <span class="seclected select">Selected</span>
        </button>
    </div>
  </div>
  <div class="time">
    <div class="remaning-time">
      <span class="each-time"> 25 Days 13 Hours 00 min</span>
      <span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这里刚刚添加了z-index 

.lg-each-contest:hover .current-caption {
  ++ z-index:2;
}

删除填充以适合容器

.current-caption {
  -- padding: 25% 0;
}
相关问题
最新问题