图片悬停在Twitter引导程序上

Image Hover on Twitter Bootstrap

本文关键字：程序上 Twitter 悬停      更新时间：2023-12-24

我的名字是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>

谢谢！

在稍微检查了一下你的页面后，我发现你的脚本没有问题，你的问题是其中一个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：在您的页面上使用谷歌chrome检查器进行测试

相关文章：