1. 首页
  2. 问答
  3. CSS位置悬停时无法正常工作

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

2017-03-14 55 views
2

我尝试在另一个div上使用position div。
当我徘徊在.lg-each-contest上时会出现.current-caption。 当盘旋在.time上时.current-caption悬停将相同。CSS位置悬停时无法正常工作

这里是我的代码

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

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

在此先感谢。

来源

2017-03-14 Siful Islam

+4

'但是第二格的文字成了首位。这意味着什么？ – Nitheesh

+2

那么，你到底想达到什么目的？ –

+0

为什么不添加'z-index：999;'到'.current-caption' – linktoahref

回答

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的溢出。我已经更新了代码。

来源

2017-03-14 04:59:08 Nitheesh

+0

谢谢，但对不起，当我hhover'。时间'悬停工作。 –

+0

@SifulIslam我已更新代码 – Nitheesh

+0

谢谢。但悬停'。时间'也将'绝对'。 –

0

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

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

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

来源

2017-03-14 05:15:38 Dulshan

0

.current-caption必须在最前面，而.lg-each-contest只徘徊

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

这里刚刚添加的z-index

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

去除填充，以适应集装箱

.current-caption { 
    -- padding: 25% 0; 
}

来源

2017-03-14 06:36:49 Amigoz

相关问题

 相关问题