0

作成した小さなアニメーションに問題があります。縦に表示された一連のアイコンがあり、マウスをその上に移動すると、各アイコンに関連するテキストが表示されます。

問題は、マウスを 4 番目のアイコンの上に移動してから 3 番目のアイコンに移動すると、テキストのサイズが 2 回変更されることに気付くことです。最初にアニメーションを終了しますが、テキストを含む段落のサイズを実際の幅に合わせて調整します。明らかではありませんが、問題は最初のアイコンでも発生します。

私が理解できることは、すべてのブラウザーで発生するため、単一のブラウザーのバグではありません。

ブラウザがこのように動作する理由と修正方法について何か考えはありますか?

私のHTMLは次のとおりです。

<aside id="social-bar">
   <div id="facebook">
      <a href="#">
         <img src="icon.png" alt="Facebook icon" />
         <p>Like us on Facebook</p>
      </a>
      <br class="clear-both" />
   </div>
   <div id="twitter">
      <a href="#">
         <img src="icon.png" alt="Twitter icon" />
         <p>Follow us on Twitter</p>
      </a>
      <br class="clear-both" />
   </div>
   <div id="googleplus">
      <a href="#">
         <img src="icon.png" alt="Google+ icon" />
         <p>+1 us on Google+</p>
      </a>
      <br class="clear-both" />
   </div>
   <div id="usergroup">
      <a href="#">
         <img src="icon.png" alt="Wordpress icon" />
         <p>Read our User Group</p>
      </a>
      <br class="clear-both" />
   </div>
</aside>

私のCSSは次のとおりです。

.clear-both {
    clear: both;
}
#social-bar {
    float: left;
    position: absolute;
    z-index: 1;
}
#social-bar > div {
    position: relative;
    margin-bottom: 0.3em;
}
#social-bar a {
    float: left;
    width: 32px;
    height: 32px;
    text-decoration: none;
    overflow: hidden;
    background-color: #333333;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
#social-bar a:hover, #social-bar a:focus {
    width: 100%;
}
#social-bar img {
    vertical-align: middle;
    float: left;
    padding-right: 0.2em;
}
#social-bar p {
    float: right;
    line-height: 32px;
    font-size: 0.6em;
    color: #FFFFFF;
    margin: 0em;
    padding-right: 1em;
}

さらに、私が作成した jsfiddle を見ると、問題を確認できます。

http://jsfiddle.net/mt7ny/

4

2 に答える 2

2

CSS アニメーションをホバーに配置し、通常のスタイルでは削除します。

#social-bar a:hover, #social-bar a:focus {
    width: 100%;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

http://jsfiddle.net/mt7ny/3/

基本的に、タグを縮小して他のタグを拡大しながら、ものの幅を計算しようとしています。物事に一定の幅が設定されていない限り、それほど速く考えることができません。

于 2013-04-29T00:42:53.840 に答える
1

最も簡単な解決策は、あなたの素敵な考え方を変えることです

#social-bar a:hover, #social-bar a:focus {
    width: 100%;
}

に

#social-bar a:hover, #social-bar a:focus {
    width: 135px;
}

問題は解決しましたが、以前ほど良くないかもしれません:)

于 2013-04-29T00:19:08.730 に答える