Question

当图像悬停以便点击它们时，我试图在图像上显示图标，而对于这部分它可以很好地工作但是当我悬停图标时会产生奇怪的效果。图标似乎高速左右翻译。有办法解决这个问题吗？

＆＃13;

.g-mb-20 {
    margin-bottom: 1.42857rem !important;
}
.g-pos-rel {
    position: relative !important;
}
.o-hidden{
  overflow: hidden;
}
.g-pos-abs {
    position: absolute !important;
}
img + ul.rightFlyOut {
  position: absolute;
  top: 0px;
  right: -24%;
  width: 30px;
  padding: 1px;
  list-style: none;
  background-color: #000000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow: hidden;
  
}

ul.rightFlyOut li {
  margin-bottom: 5px;
 
margin-left: 25px;
 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  
}

ul.rightFlyOut li a {
  width: 5px;
  height: 5px;
}

img:hover + ul.rightFlyOut {
  right: 0%;
}

img:hover + ul.rightFlyOut li {
  margin-left: 0%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-6 col-lg-4 g-mb-30">
<figure class="g-pos-rel o-hidden g-mb-20">
                    <img class="img-fluid" src="http://lorempicsum.com/rio/480/700/4" alt="Image Description">
                      <ul class="rightFlyOut">
                        <li><i class="fa fa-inverse fa-telegram" aria-hidden="true"></i></li>
                        <li><i class="fa fa-inverse fa-id-card" aria-hidden="true"></i></li>
                        
                      </ul>
                      </figure>
                      </div>

＆＃13;

Answer 1

这是因为<img>和<ul>被注册为两个不同的元素。尝试包装它们并检查是否悬停在该包装上。

.wrapper ul.rightFlyOut {
     right: 0%;
}

.wrapper ul.rightFlyOut li {
    margin-left: 0%;
}

或

img:hover + ul.rightFlyOut,
ul.rightFlyOut:hover {
  right: 0%;
}

img:hover + ul.rightFlyOut li,
ul.rightFlyOut:hover li {
  margin-left: 0%;
}

Answer 2

这一点都不奇怪。这是正常行为。

这是因为您将图标设置为悬停在图像上时显示。他们这样做了。但是，当您将鼠标悬停在图标上时，图像上的图像就不再悬停，因此图标会回到原始位置。将光标保持在那里会使您重复悬停并悬停图像。这就是图标出现和消失的原因。

选项1：将相同的img:hover样式添加到ul.rightFlyOut。

请参阅下面的代码段

.g-mb-20 {
  margin-bottom: 1.42857rem !important;
}

.g-pos-rel {
  position: relative !important;
}

.o-hidden {
  overflow: hidden;
}

.g-pos-abs {
  position: absolute !important;
}

img + ul.rightFlyOut {
  position: absolute;
  top: 0px;
  right: -24%;
  width: 30px;
  padding: 1px;
  list-style: none;
  background-color: #000000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow: hidden;
}

ul.rightFlyOut li {
  margin-bottom: 5px;
  margin-left: 25px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

ul.rightFlyOut li a {
  width: 5px;
  height: 5px;
}

img:hover + ul.rightFlyOut,
ul.rightFlyOut:hover {
  right: 0%;
}

img:hover + ul.rightFlyOut li,
ul.rightFlyOut li {
  margin-left: 0%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-6 col-lg-4 g-mb-30">
  <figure class="g-pos-rel o-hidden g-mb-20">
    <img class="img-fluid" src="http://lorempicsum.com/rio/480/700/4" alt="Image Description">
    <ul class="rightFlyOut">
      <li><i class="fa fa-inverse fa-telegram" aria-hidden="true"></i></li>
      <li><i class="fa fa-inverse fa-id-card" aria-hidden="true"></i></li>

    </ul>
  </figure>
</div>

选项2：

在父级添加悬停样式。请参阅代码段

.g-mb-20 {
  margin-bottom: 1.42857rem !important;
}

.g-pos-rel {
  position: relative !important;
}

.o-hidden {
  overflow: hidden;
}

.g-pos-abs {
  position: absolute !important;
}

img + ul.rightFlyOut {
  position: absolute;
  top: 0px;
  right: -24%;
  width: 30px;
  padding: 1px;
  list-style: none;
  background-color: #000000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow: hidden;
}

ul.rightFlyOut li {
  margin-bottom: 5px;
  margin-left: 25px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

ul.rightFlyOut li a {
  width: 5px;
  height: 5px;
}

figure:hover ul.rightFlyOut {
  right: 0%;
}

figure:hover ul.rightFlyOut li{
  margin-left: 0%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-6 col-lg-4 g-mb-30">
  <figure class="g-pos-rel o-hidden g-mb-20">
    <img class="img-fluid" src="http://lorempicsum.com/rio/480/700/4" alt="Image Description">
    <ul class="rightFlyOut">
      <li><i class="fa fa-inverse fa-telegram" aria-hidden="true"></i></li>
      <li><i class="fa fa-inverse fa-id-card" aria-hidden="true"></i></li>

    </ul>
  </figure>
</div>

意外悬停对图标的影响

2 个答案: