css background-image nav - 不可点击

由于某种原因，鼠标光标并不表示可点击性。它会显示指针，可能是它的一小部分，但我希望整个部分对用户来说是可点击和明显的。css background-image nav - 不可点击

图标正确显示和好看，只是不很明显点击。

<ul class="team-icons"> 
    <li><a href="/link-url/" class="main-sprite header-icon header-team1"><span style="width:25px;height:25px;"></span></a></li> 
      <li><a href="/link-url/" class="main-sprite header-icon header-team2"></a></li> 
</ul> 

.team-icons li { 
float: left; 
width: 25px; 
height: 25px; 
margin:5px 15px; 
} 
.header-icon { 
width: 25px; 
height: 25px; 
display:inline-block; 
background-size:375px; 
} 
.header-team1 { 
background-position: -0 -93.75px; 
} 
.header-team2 { 
background-position: -25px -93.75px; 
}

来源

2017-04-04 RailsTweeter

设置<li>显示内嵌区块及<a>显示块：

.team-icons li { 
    width: 25px; 
    height: 25px; 
    margin:5px 15px; 
    display: inline-block; 
} 
.header-icon { 
    width: 25px; 
    height: 25px; 
    display: block; 
}

这样的链接占据了整个空间和列表项目仍然是内联。

编辑：如果你在做内联块，你也不需要在li中的float: left;。

来源

2017-04-04 22:15:12

我做到了。当我进行检查时，显示链接占据了整个空间。当我点击它时，它似乎点击。但是，鼠标看起来不像指针（指示它应该是可点击的）。就好像只有整个空间的一小部分会触发光标变化。奇怪。任何想法？ – RailsTweeter

是否有其他一些改变光标的CSS？这里是一个工作实现：https://codepen.io/anon/pen/dvLMEd –

有趣的是，我得到了你的例子相同的行为。当鼠标进入空间时，它会闪烁到一个光标，然后返回到典型指针。我在Chrome上。 – RailsTweeter

css background-image nav - 不可点击

回答

相关问题