Question

当我将鼠标悬停在元素的角上时，我会得到一个奇怪的，持续的悬停和悬停效果，该如何解决？

HTML

<h2>
HELLO
</h2>

CSS

h2 {
    position: absolute;
    background: rgba(2,35,64,0.58);
    width: calc(100% - 97px);
    height: calc(100% - 88px);
    line-height: calc(100% + 70px);
    top: 0;
    left: 0;
    display: block;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    color: #FFF;
    border: solid 20px rgba(2,35,64,0);
    padding: 20px;
    margin: 0px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    cursor: pointer;
}

h2:hover {
    border: solid 5px #FFF;
    padding: 10px;
    margin: 25px;
    background: transparent;
}

h2.woocommerce-loop-category__title:hover {
    border: solid 5px #FFF;
    padding: 10px;
    margin: 25px;
    background: transparent;
}

http://jsfiddle.net/xc7vjstn/1/

Answer 1

将背景从透明更改为所需的颜色，您将看到内容，并且如果您想像小盒子一样保持在线状态，则需要使用边距和填充。

iterator()

Answer 2

var CategoryList = ItemList.Select(x => x.CategoryName.Value).Distinct().ToList();中的class own_custom_CrossValidator:#like those in source sklearn/model_selection/_split.py def init(self):#coordinates,meter pass # self.coordinates = coordinates # self.meter = meter def split(self,X,y=None,groups=None): #for compatibility with #cross_val_predict,cross_val_score for i in range(0,len(X)): yield tuple((np.array(list(range(0,len(X))))导致行为消除了已解决问题的边距

margin

Answer 3

这是我的解决方案，请查看下面的实时示例：

h2 {
  position: absolute;
  background: rgba(2, 35, 64, 0.58);
  width: calc(100% - 97px);
  height: calc(100% - 88px);
  line-height: calc(100% + 70px);
  top: 0;
  left: 0;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
  color: #FFF;
  border: solid 20px rgba(2, 35, 64, 0);
  padding: 20px;
  margin: 0 auto;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  cursor: pointer;
}

h2:hover {
  background: transparent;
  -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

<h2>
  HELLO
</h2>

CSS Border Transition-怪异效果

3 个答案: