[英]Image Hover on Twitter Bootstrap
我的名字叫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
屬性,這是導致無法在沒有選擇其他星星的情況下在星星之間transition
的原因。
PD:已在您的網頁上使用Google Chrome瀏覽器進行了測試
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.