Twitter Bootstrap 上的图像悬停

Question

我的名字是 Enrique，我在使用 Twitter Bootstrap 上的 :hover 属性时遇到了问题。

我做了一个 5 颗星的评分系统，但是当一颗星星“悬停”时，星星开始闪烁，真是一团糟

当我在没有任何脚本的情况下使用相同的系统时，它工作正常，这就是为什么我认为问题出在 Bootstrap 或 Jquery 上。

这是我正在开发的网站：http://apostilaz.pilha.inf.br/detalhaapostila

星星在写着 (BAIXAR APOSTILA) 的绿色大按钮上方，当它们为空时很难看到，我知道。

这是一个jsfiddle，代码相同，没有任何JS，代码如下：

http://jsfiddle.net/EnriqueSampaio/kb9a8/

CSS

.avalia {
    width: 90px;
    height: 17px;
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
    clear: both;
    position: relative;
    background: url(../img/estrelas.png) no-repeat 0 0;
}

.semestrela {
background-position: 0 0;
}

.umaestrela {
background-position: 0 -18px;
}

.duasestrelas   {
background-position: 0 -36px;
}

.tresestrelas   {
background-position: 0 -54px;
}

.quatroestrelas {
background-position: 0 -72px;
}

.cincoestrelas   {
background-position: 0 -90px;
}

ul.avalia li  {
cursor: pointer;
float: left;
text-indent: -999em;
}

ul.avalia li a  {
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 17px;
text-decoration: none;
z-index: 200;
}

ul.avalia li.uma a  {
left: 0;
}

ul.avalia li.duas a {
left: 17px;
}

ul.avalia li.tres a {
left: 34px;
}

ul.avalia li.quatro a   {
left: 51px;
}

ul.avalia li.cinco a    {
left: 68px;
}

ul.avalia li a:hover    {
z-index: 2;
width: 90px;
height: 17px;
overflow: hidden;
left: 0;
background: url(../img/estrelas.png) no-repeat 0 0;
transition:none !important;
}

ul.avalia li.uma a:hover    {
background-position: 0 -18px;
}

ul.avalia li.duas a:hover    {
background-position: 0 -36px;
}

ul.avalia li.tres a:hover    {
background-position: 0 -54px;
}

ul.avalia li.quatro a:hover    {
background-position: 0 -72px;
}

ul.avalia li.cinco a:hover    {
background-position: 0 -90px;
}

HTML

<ul class="avalia semestrela">
    <li class="uma"><a href="#fakelink" title="1 Estrela">1</a></li>
    <li class="duas"><a href="#fakelink" title="2 Estrelas">2</a></li>
    <li class="tres"><a href="#fakelink" title="3 Estrelas">3</a></li>
    <li class="quatro"><a href="#fakelink" title="4 Estrelas">4</a></li>
    <li class="cinco"><a href="#fakelink" title="5 Estrelas">5</a></li>
</ul>

谢谢！

Answer 1

稍微检查一下您的页面后，我发现您的脚本没有问题，您的问题出在其中一个 css 文件上。这个：

<link rel="stylesheet" type="text/css" href="http://apostilaz.pilha.inf.br/public/plugins/ui/css/flat-ui.css" media="all">

flat-ui.css 正在为a 标签添加一个特殊的 CSS：

a {
 color: #16a085;
 text-decoration: none;
 -webkit-transition: 0.25s;
 -moz-transition: 0.25s;
 -o-transition: 0.25s;
 transition: 0.25s;
 -webkit-backface-visibility: hidden;
}

要使您的:hover 星星正常工作，您需要删除transition 属性，这是导致该行为的原因，如果不选择另一颗星星，您将无法在星星之间切换。

PD：使用 google chrome 检查器在您的页面上测试