Question

为什么有人将鼠标放在谷歌图标，Instagram和Facebook图标上，之后它们就会消失。

移动响应式菜单也会发生这种情况，文本会消失并且不会返回原始颜色状态。

网站是hopkinslawokc.com

Answer 1

嗨，你没有设置不透明度，但是如果你将鼠标悬停在图标上而不是他的不透明度。如果你给李＆gt; id给出不透明度。所以li id =＆＃34; menu-item-40不透明度：0.35;

Answer 2

＆＃13;

// Social Hover
	jQuery(".social-icon").hover(function(){
		jQuery(this).animate({ opacity: 0.35 }, 150);
	}, function(){
		jQuery(this).animate({ opacity: 1 }, 150);
	});

/* this bit of code was found in
http://hopkinslawokc.com/wp-content/themes/goodspace-v1-11/javascript/gdl-scripts.js
*/

＆＃13;

ul {
  list-style: none;
  font-size: 36px;
}

ul li {
  float: left;
  margin-right: 20px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
  <li class="social-icon">
    <i class="fa fa-facebook"></i>
  </li>
  <li class="social-icon">
    <i class="fa fa-twitter"></i>
  </li>
  <li class="social-icon">
    <i class="fa fa-google"></i>
  </li>
</ul>

＆＃13;

正如预期的那样工作正常，除了第一个答案所说的......如果你希望它从get get中看起来消失，那么你需要在css中添加它。

Answer 3

这是仅限css的解决方案。

ul {
      list-style: none;
      font-size: 36px;
    }

ul li {
      float: left;
      margin-right: 20px;
      opacity:.35;
      transition: all 150ms linear;
    }
ul li:hover{opacity:1;}
.fa-facebook{color:blue;}
.fa-twitter{color:#2b2626;}
.fa-google{color:#ff0000;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
  <li class="social-icon">
    <i class="fa fa-facebook"></i>
  </li>
  <li class="social-icon">
    <i class="fa fa-twitter"></i>
  </li>
  <li class="social-icon">
    <i class="fa fa-google"></i>
  </li>
</ul>

鼠标悬停在CSS问题上（后面应用不透明度的CSS）

3 个答案: