顯示使用CSS

-4

我JS提琴默認懸停在這裏：http://jsfiddle.net/n6f5x/顯示使用CSS

我有以下的CSS：

/* Advanced CSS hover styles */ 
ul.hosplead { overflow: hidden; padding: 5px; } 
ul.hosplead > li { 
    position: relative; 
    float: left; 
    list-style: none; 
    margin: 0 20px 20px 0; 
    font-size: 10px; 
    z-index: 1; 

} 
ul.hosplead li       { text-decoration: none; display: block; } 
ul.hosplead li img      { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */ 
ul.hosplead li:not([class=na]) img  { position: static; } /* Reset relative position, as this plays havoc with good browsers */ 
ul.hosplead li:hover, ul li:focus   { display: block; outline: none; -moz-box-shadow: 3px 3px 5px #000; -webkit-box-shadow: 3px 3px 5px #000; box-shadow: 3px 3px 5px #000; } 
ul.hosplead li:hover img, ul li:focus img { outline: 3px solid #ccc; } 

ul.hosplead li:hover:after, 
ul.hosplead li:focus:after 
{ 
    content: attr(title); 
    color: #000; 
    position: absolute; 
    bottom: 0; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 12px; 
    width: 100%; 
    background: rgb(255,255,255); 
    background: rgba(255,255,255,0.7); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */ 
    display: block; 
    text-shadow: 1px 1px 1px #fff; 
}

而下面的HTML：

    <ul class=hosplead> 
         <li title="Pradeep Chandra [CMO]"> 
          <img src="http://4.bp.blogspot.com/_ShYMN0KZ8w4/TUzaT1Z5izI/AAAAAAAAEj4/KRiNd1ossSE/high-quality-wallpapers%5B6%5D.jpg" width="205" title="Pradeep Chandra [CMO]" height="295" alt="Pradeep Chandra [CMO]" /> 
         </li> 
        </ul>

我是什麼希望做的是翻轉效果，換句話說，當用戶訪問頁面時，應該默認ON HOVER效果。我怎麼能做到這一點？

來源

2013-05-01 Si8

使用'：not'選擇器，或換周圍的CSS。 – 2013-05-01 18:45:40

將懸停代碼置於普通CSS內，然後將懸停部分放在懸停部分內...... – lifetimes 2013-05-01 18:45:58

不知道爲什麼你需要有人爲你寫你的CSS，但它是。 :-)正如其他人暗示的那樣，這只是一個逆轉事情的問題。

http://jsfiddle.net/isherwood/n6f5x/6/

ul.hosplead li { /* was :hover */ 
    /* no changes */ 
} 
ul.hosplead li:hover { 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 
ul.hosplead li img { /* was :hover */ 
    /* no changes */ 
} 
ul.hosplead li:hover img { 
    outline: none; 
} 
ul.hosplead li:after { /* was :hover */ 
    /* no changes */ 
} 
ul.hosplead li:hover:after { 
    display: none; 
}

來源

2013-05-01 18:55:12 isherwood

我確實寫了它，但有點不確定是否有其他解決方法。但謝謝:) – Si8 2013-05-01 19:36:52

在CSS DEMO取出hover選擇http://jsfiddle.net/n6f5x/2/

li { 
    // no hover selector stated 
}

來源

2013-05-01 18:48:59 Vector

的CSS版本：在您的樣式刪除:hover：http://jsfiddle.net/kuroisuna/n6f5x/1/

使用jQuery你可以使用模擬的hover.active等級：http://jsfiddle.net/kuroisuna/n6f5x/5/

...刪除課程mouseenter。

來源

2013-05-01 18:53:09

顯示使用CSS

回答

相關問題