0

私はこのメニューを持っています：

<div class="nav">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">AMORTECIMENTO</a></li>
    </ul>
</div>

通常の外観：

通常の外観

これは、ユーザーがメニューにカーソルを合わせたときの外観です。

：ホバーアピアランス

だから、私は「AMORTECIMENTO」のようなメニューで最大の名前を持っていると仮定して、cssを設定する方法を知りません

任意のヒント？？

私はこれを試しましたが、小さな名前では、メニューが背景をカットしています...

.nav ul li a{
    display:block;
    font-size:15px;
    color:#000;
    padding:5px 7px;
    background:transparent;
    text-decoration:none;
}

.nav ul li:hover{
    background:url(../imagens/bola_fundo_menu.png) center no-repeat;
}

私の意図は、ユーザーがメニュー項目にカーソルを合わせると、背景<li>にバスケットボールが表示され、<a>タグに背景が#FFFになりますが、メニューに小さい名前と大きい名前があるため、タグの幅<li>と<a>タグを設定できません... おもう

4

4 に答える 4

3

疑似要素を使用した簡単な例を次に示します。http：//codepen.io/anon/pen/iwerJ

次のようなCSSで、最初に投稿した正確なHTMLを使用します。

.nav { 
  background: #CCC; 
  font-family: Helvetica, Arial, sans-serif;
  line-height: 48px; 
  margin: 50px auto 0;
  width: 90%;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block; 
}

.nav ul li {
  float: left;
  font-size: 14px;
  list-style: none;
  padding: 0 10px;
  position: relative;
}
.nav ul li:hover:after {
    /* Replace background with image */
    background: #abc123;
    /* Optionally remove radius */
    border-radius: 30px;

    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -30px; 
    margin-left: -30px;
    height: 60px; width: 60px;
}

.nav a {
  color: #333;
  display: inline-block;
  line-height: 180%;
  padding: 0 4px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
    .nav li:hover a { background: #FFF; }
于 2012-10-04T19:04:22.603 に答える
2

ホバーの背景を設定するだけです。例えば：

div.nav li:hover{
  background-image: url('basketball.jpg');
}

編集：背景画像だけでなく、もっと多くの問題があります...

  • ボールの左右が途切れないように、ナビゲーションテキストを垂直方向に中央に配置してナビゲーションセルの最小幅を設定する必要があります
  • アンカータグに白一色の背景を設定して、テキストが実際にホバーで表示されるようにします
  • 中央の画像よりも大きいアンカータグのz-indexを設定して、すべてクリックできるようにします（現在、中央の右側にあるリンクをクリックすることはできません）。

幸運を。私はあなたのためにそのコードのすべてを書き出すことはできませんが、それはあなたを正しい方向に送るはずです。

于 2012-10-04T18:39:29.507 に答える
0

min-widthカットオフ画像を修正するには、.nav li要素にを配置するだけです。値が少なくとも背景画像と同じ幅であることを確認してください。

おそらく、も追加する必要がありますtext-align: center。

于 2012-10-04T18:49:28.830 に答える
0

あなたのnavクラスであなたがしなければならないのはあなたのcssをこのように書くことだけです：

.nav ul li:hover
{ 
background-image:url('yourimage.jpg');
}
于 2012-10-04T18:39:19.160 に答える