-2

Pseudo-elementホバーに問題があります。私はそれを機能させるためにたくさんのものを試しましたが、役に立ちませんでした。それを機能させる方法に頭を悩ませることはできません、誰か？

HTML

    <div>
        <header id="header2">
            <ul id="midlist">
                <li class="twitter"><a href="www.twitter.com">Twitter</a>
                </li>
                <li class="facebook"><a href="www.twitter.com">Facebook</a>
                </li>
                <li class="youtube"><a href="www.twitter.com">Youtube</a>
                </li>
            </ul>
        </header>
    </div>

CSS

/* -------------------------------------------------*/
/* ----------------hover-------------------------- */

.facebook:before {
content: url(http://nobodyfilm.org/images/Mr.-Nobody-Facebook.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
}

.facebook a:hover:before {
content: url(http://nobodyfilm.org/images/Mr.Nobody-Facebook-Hover.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
  ;}

.facebook a:hover {color:red;}

/* ----------------hover----------------------------*/
/* ----------------------------------------------- */



.twitter:before{
 content: url(http://nobodyfilm.org/images/Mr.-Nobody-Twitter.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
}

.youtube:before {
 content: url(http://nobodyfilm.org/images/Mr.-Nobody-Youtube.jpg);
 padding-right: 10px;
position: relative;
bottom: -.4em;
}


#midlist {
  width:708px;
  list-style-type: none;
  margin:0 auto;
    }

#midlist li {
  float:left;
  width:112px;
  height:10px;
  line-height:0px;
  }


#header2 {
  margin-top:2px;
  margin-bottom:5px;
  background-color: #191919;
  padding:21px;
  padding-bottom: 51px;
}

http://jsfiddle.net/VrY4j/4/

ありがとう！

4

2 に答える 2

4

これを変える

.facebook a:hover:before {

これに

.facebook:hover:before {

別のオブジェクトの疑似要素を参照しているためです。

フィドル： http： //jsfiddle.net/VrY4j/12/

于 2013-01-17T09:52:19.813 に答える
1

li全体をホバー状態にしたいので、liではなく：beforeをaに適用する必要があります。フィドルでは、Facebookのものだけを修正しました。

http://jsfiddle.net/VrY4j/11/

.facebook a:before {
content: url(http://nobodyfilm.org/images/Mr.-Nobody-Facebook.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
}

.facebook:hover a:before {
content: url(http://nobodyfilm.org/images/Mr.Nobody-Facebook-Hover.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;
  ;}
于 2013-01-17T09:50:23.333 に答える