Question

我尝试进行简单的导航，使文字在悬停时变得粗体。因为它并不那么难，所以我很快就得到了它，但是每当我徘徊它时，元素就会推动＃34;远离导航中的其他元素。所以我搜索了几个小时，因为我找到了伪元素的解决方案。但是这种方法在Firefox中不起作用。

看看这个：

＆＃13;

#SOCIALMEDIA {
	position:relative;
	margin-right: 100px;
	margin-top: 60px;	
	float:right;
}

#SOCIALMEDIA_LIST {
	font:  14pt Roboto_ltLocal;
	display:inline-block;
	overflow: hidden;
	text-align:center;
	
}

#SOCIALMEDIA_LINKS { 
	text-decoration:none;
	color: #444444;
	display:inline-block;
	padding:4px 8px;
	text-align:center;
}	

#SOCIALMEDIA_LINKS:hover { 
	font-weight: bolder;
}	

#SOCIALMEDIA_LINKS::after {
	display:block;
	content:attr(title);
	font-weight:bold;
	height:1px;
	color:transparent;
	overflow:hidden;
	visibility:hidden;
}

＆＃13;

<ul id=SOCIALMEDIA>
						<li id=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Livestream"><span class="social-link"> Livestream</span></a></li>
						<li id=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="YouTube"><span class="social-link"> YouTube</span></a></li>
						<li id=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Twitter"><span class="social-link"> Twitter</span></a></li>		
					</ul>

＆＃13;

在JSFiddle和Chrome以及其他所有浏览器中，它都像魅力一样。但Firefox并不像Pseudo那样。我在互联网上寻找解决方案......但没有什么比这更好的了。也许你可以帮助我。

我的代码是＆＃34;自定义＆＃34;的版本 the best top answer of this post 4 years ago

老实说，我不知道它是如何工作的，我只是看到它在某些浏览器中有效。

Answer 1

在li元素上设置静态宽度并删除伪选择器将阻止他们移动他们的兄弟姐妹。像这样：

＆＃13;

#SOCIALMEDIA {
  position: relative;
  margin-right: 100px;
  margin-top: 60px;
  float: right;
}

.SOCIALMEDIA_LIST {
  font: 14pt Roboto_ltLocal;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  /*This is what I added*/
  width: 100px;
}

#SOCIALMEDIA_LINKS {
  text-decoration: none;
  color: #444444;
  display: inline-block;
  padding: 4px 8px;
  text-align: center;
}

#SOCIALMEDIA_LINKS:hover {
  font-weight: bolder;
}

＆＃13;

<ul id=SOCIALMEDIA>
  <li class=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Livestream"><span class="social-link"> Livestream</span></a></li>
  <li class=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="YouTube"><span class="social-link"> YouTube</span></a></li>
  <li class=SOCIALMEDIA_LIST><a id=SOCIALMEDIA_LINKS href="#" title="Twitter"><span class="social-link"> Twitter</span></a></li>
</ul>

＆＃13;

另外，我将您的#SOCIALMEDIA_LIST更改为.SOCIALMEDIA_LIST，因为ID永远不会重复。

大胆的悬停移动元素。只有解决方案在Firefox中不起作用

1 个答案: