1

メニューバーがあります

  • 家
  • 私たちに関しては
  • お問い合わせ

のような記号でメニューを装飾しました# Home # About Us # Contact #。

だから、私が達成したいのは、アイテムの上にマウスを置くと、アイテムの色と横のシンボルが変更されることです。例えば：

# ホーム #私たちについて # お問い合わせ #

# ホーム# 私たちについて #お問い合わせ #

# ホーム # 私たちについて# お問い合わせ #

とにかくこれを達成するには？JavaScriptソリューションを使用しないことをお勧めします、ありがとう。

** リクエストに応じて HTML マークアップで更新しました。シンボルを配置するためのダミー ソリューションです。

ほとんどの人が私の質問を誤解していると思います。私が望んでいたのは、リストアイテムをホバーする方法ではなく、アイテムを囲むシンボルをホバーしたいのです。

//html
<nav>
  <ul>
    <li># Home </li>
    <li># About Us </li>
    <li># Contact Us #</li>
  </ul>
</nav>

//css
nav ul li {
  display: inline-block;
}
nav ul li:hover {
  font-weight: bold;
}
4

7 に答える 7

3

http://jsfiddle.net/cLnUW/が必要な場合があります。次の ように記述します。

HTML

<ul>     
     <li><span>#</span> Home </li>     
     <li><span>#</span> About Us </li>     
     <li><span>#</span> Contact Us</li>
     <li><span>#</span></li>        
</ul>

CSS

li {   display: inline-block; }
li:hover {   font-weight: bold; }
li:hover span, li:hover + li span{color:red;}
于 2012-10-31T09:52:23.323 に答える
2

seo フレンドリーな例:

<html>
    <head>
        <style>
            nav li{
                display: inline-block;
                text-decoration: none;
                color: #000;
                cursor: pointer;
            }
            nav li:hover {
                font-weight: bold;
                color: #FF0000;
            }
            nav li:before, nav li:hover:after, nav li:last-child:after {
                content:" # ";
            }
            nav li:hover + li:before {
                content:"";
            }
        </style>
    </head>
    <body>
        <nav>
          <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Contact Us</li>
          </ul>
        </nav>
    </body>
</html>
于 2012-10-31T09:58:49.793 に答える
0 
<div id="navBar">
    <ul>
        <li><span class="symb">#</span> about</li>
        <li><span class="symb">#</span> home</li>
    </ul>
</div>

#navBar ul li:hover{
    color: red;
}
span.symb{
    padding-bottom:5px;
}

そのような順序付けられていないリストを使用し、ホバー疑似セレクターで変更します

于 2012-10-31T09:30:15.920 に答える
0

cssを使ってみる:hover

​ul li:hover{
  color: black;
  font: 14px;
  font-weight: bold;
}​
于 2012-10-31T09:29:19.563 に答える
0

HTML

<div id="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#menu ul li a:hover
{
    color:Green;
}
#menu ul li a:hover:before
{
content:"$";
}

#menu ul li a:before
{
content:"#";
}

サンプル </p>

于 2012-10-31T09:32:23.810 に答える
0

:hover疑似セレクターを before 疑似セレクターと一緒に使用できます。例えば。

.about:hover{
    color:#ff0000;
}
.about:hover:before{
    content:"->";
}

before 疑似セレクターは、要素の先頭に何らかのコンテンツ (この場合は矢印) を追加します。

于 2012-10-31T09:26:39.073 に答える
-1

デモソリューション： http： //jsfiddle.net/PBrkX/

以下のコードは、サンプルhtmlを使用して、ホバーがどのように機能するかを示しています。

 <span id='home_sym'> # Home </span>
    <span id='about_sym'> # About Us </span> 
   <span id='contact_sym'> # Contact Us </span>

  css :

  #home_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

   #about_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

    #contact_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }
于 2012-10-31T09:27:46.860 に答える