2

さて、CSSでトランジションを希望どおりに機能させるには、いくつか問題があります。CSSの経験がある人に、自分が達成したいことを達成する方法を教えてもらいたいと思います。

私が持っている実際の初期遷移は正常に機能しますが、ここで2つの問題があります。

まず、ナビゲーションバーの2番目のボタン/リンクであるCharactersには3つのサブリンクがあり、Charactersボタンにカーソルを合わせると表示されます。キャラクターボタンの実際の遷移が行われるまで、これらのサブリンクが表示されないようにしたいと思います。私が言っていることをあなたが理解していることを願っています。それで、これは可能ですか、もしそうなら、どのように？

第二に、現時点で私が行っているのは、ボタン/リンクがロールオーバーされたときのトランジションだけですが、ロールアウトされたときのトランジションはありません。代わりに、ロールアウトするとすぐにデフォルトの状態に戻り、トランジション効果が実際に損なわれているように感じます。そこで、ホバーアウトとホバーインのトランジションを設定できるかどうかを知りたいのですが。

これが私のHTMLコードです：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link rel="stylesheet" href="complex_1.css"/>
</head>

<body>
  <ul id="navbar">
    <li id="home"><a href="#">Home</a></li>
    <li id="characters"><a href="#">Characters</a>
        <ul>
          <li id="subzero"><a href="#">Sub-Zero</a></li>
          <li id="scorpion"><a href="#">Scorpion</a></li>
          <li id="kano"><a href="#">Kano</a></li>
        </ul>
    </li>
    <li id="about"><a href="#">About</a></li>
    <li id="contact"><a href="#">Contact</a></li>
  </ul>
</body>
</html>

そしてそれに問題のあるCSSコード：

ul { /* Sets out the dimensions of the unordered list. */
  font-family:Verdana;
  font-size: 17px; 
  margin: 0px;
  padding: 0px; 
  list-style:none;
  position:absolute;
  letter-spacing:1px;
} 

ul li { /* All list items of unordered lists. */  
  display: block;
  position: relative; 
  text-align:center;
  float: left; /* Makes the navigation bar horizontal instead of vertical. */ 
} 

li ul { 
  display: none; /* Hides the dropdown menu list items by default. */ 
}

ul li a { /* All list items of unordered lists that are links. */ 
  color: #ffffff; 
  background: #000000;
  display:block;
  text-decoration: none;
  border-top: 1px solid #ffffff; 
  padding: 7px 40px 7px 40px; 
  margin-left: 0px; 
  white-space: nowrap; 
} 

ul li a:hover { 
  -moz-transition-property:background-color;
  -moz-transition-duration:400ms;
  -moz-transition-timing-function:ease-in-out; 
  color:#ffffff;
  background: #ff0000;
  } 

li:hover ul { 
  display:block;
  width:182px; 
} 

li:hover li {
  display:block; 
  font-size:10px; 
  float:none;
}

li:hover a { 
  background: #000000;   /* This is where you apply the colour you want for the dropdown list items off the main menu. */
} 

li:hover li a:hover { 
  color: #ffffff;
  background: #ff0000;   /* This is where you apply the colour you want for the hover over the list. */
}

私がここでやりたいことを手伝ってくれる人に事前に感謝します。本当に感謝しています。

4

3 に答える 3

1

わかった。それで。回答1。

特定のセレクターにtransitionプロパティを配置する代わりに、次のようなセレクターを作成してみてください。

.trans {
    -webkit-transition:  all 300ms linear;
    -moz-transition:     all 300ms linear;
    -ms-transition:      all 300ms linear;
    transition:          all 300ms linear; 
}

次に、htmlアンカータグにclass="trans"を適用できます。

遷移が「out」ではなく「in」でのみ発生する理由は、：hoverにのみ適用されているためです。通常のセレクターと：hover状態の両方に適用する必要があります。

上記はクリーンで短い形式でしたが、異なる遷移時間が必要になる場合があります。

その場合：

.my-thing {
    -webkit-transition:  all 300ms linear;
    -moz-transition:     all 300ms linear;
    -ms-transition:      all 300ms linear;
    transition:          all 300ms linear; 
}

.my-thing:hover {
    -webkit-transition:  all 600ms linear;
    -moz-transition:     all 600ms linear;
    -ms-transition:      all 600ms linear;
    transition:          all 600ms linear; 
}

回答2。

移行を遅らせることができます。あなたの場合、display：noneからblockへの移行。

.delay {
    transition-delay: 300s;
    -moz-transition-delay: 300s;
    -webkit-transition-delay: 300s;
    -o-transition-delay: 300s;
}

したがって、これをsubulなどに適用できます。

一般的に、私はあなたのセレクターを再考します。あなたの興奮の中で、あなたは物事を必要以上に複雑にしたようです。

このjsFiddleをチェックしてください。

ドロップダウンをアニメーション化するには、Javaスクリプトが必要になる場合があります。display：nonetoblockでトランジションを取得できないようです。しかし、フィドルをチェックしてください。それはあなたの質問に答え、上記の両方の解決策の例を示していると思います。幸運を！

于 2012-12-03T04:55:02.993 に答える
0

ここでWebkitの移行例を見てみてください。Webkit用であることは知っていますが、役立つ場合があります。

div {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
}

div:hover {
    opacity: 0;
}

遷移が両方向で機能するためには、通常と：hoverの両方の状態に値を設定する必要があります。

于 2012-05-03T13:22:39.263 に答える
0

ul li a質問の2番目の部分に答えるには、状態の代わりに遷移コードを入れることは、:hoverすべての状態（、、、、）で機能することを意味:linkし:hoverます。:focus:active

サブメニューを移行する場合は、移行コードをに入れてみてくださいul li ul {}。ただし、プロパティの移行はdisplayあまりうまく機能しないため、おそらくset opacity（またはsetなどheight）も試してみることをお勧めしますul li ul {opacity: 0;} ul li:hover ul {opacity: 1;}。

于 2012-05-03T13:39:39.473 に答える