1

簡単なCSSリストがあります。最初の<li>行をホバーしたように表示したい。これどうやってするの？私はこのようなことを試しました：<li class="#menu a:hover"><a href="#">Option 1</a></li>しかし、残念ながらうまくいきません。

お時間をいただきありがとうございます！

コードは次のとおりです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple menu</title>
<style type="text/css">
#menu a:hover{
    background-color:   yellow;
}
</style>
</head>
 <body>
  <div id="menu">
   <ul>
    <li class="#menu a:hover"><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
   <ul>
  </div>
 </body>
</html>
4

1 に答える 1

2

最初のリンクに黄色の背景が必要だと思うので、このようにします

#menu ul li:nth-child(1) a {
    background-color:   yellow;
}

または、たとえばクラスを与えるだけです.current

.current {
   background-color:   yellow;
}

<div id="menu">
  <ul>
    <li><a href="#" class="current">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  <ul>
</div>

答えがNOであるよりも現在のページを強調表示する意図がある場合は、CSSでそれを行うことはできません。JavaScript/jQueryまたはPHPなどのサーバー側プログラミングが必要になります。

于 2013-01-29T15:03:34.783 に答える