0

ここに私のjsfiddleコード がありますhttp://jsfiddle.net/jspence29/VqZSw/ しかし、それが機能していないように見えるので、コードを提供します

#links ul

{
  margin-left: auto;
  position: fixed;
  margin-right: auto;
}

#links ul li

{
  margin-left: 200px;
  font-family: sans-serif:
  background-color: #fff;
  display: inline;
  width: 25px;
}

#links ul li a 

{
  background-color: #fff;
  opacity: 0.8;
  filter: alpha(opacity=80);
  color: #ffffff;
  text-align: center;
  width: 25px;
  padding: 10px;
  font-family: sans-serif;
  text-decoration: none;
  position: relative;
  top: 180px;
  overflow: hidden;
  transition:width .5s;
  -moz-transition:width .5s; /* Firefox 4 */
  -webkit-transition:width .5s; /* Safari and Chrome */
  -o-transition:width .5s; /* Opera */
}

#links ul li a:hover

{
  color: #000;
  width: 50px;
}
</style>

<head>
<body>


<div id="background" >
<div id="menuButton" onclick="showMenu()" >
<p><span style="cursor:pointer">Menu </span></p>
</div>
<div id="menu" style="display: none;">
<h1> Singapore </h1>
<p>ever onward, singapore </p>
<ul>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Gallery <span class="show"> 
Click to see pictures of the most elegant city in the world </span> </a> </li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Tour <span class="show">
Click to take a tour of the one of a kind singapore</span> </a> </li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Facts <span class="show"> 
Click to learn astounding facts of the one and only singapore</span> </a> </li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Author <span class="show"> 
Click to learn about me, and see my works cited page </span></a> </li>
</ul>
</div><!--Menu-->
<div id="links" >
<ul>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" >  Gallery </a></li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Tour </a></li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" >  Facts </a></li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" >  Author </a></li>
</ul>
</div>
</div><!--Background-->



</body>
</html>

そして私のページへのリンクhttp://www.spencedesign.netau.net/singaporehomemenu.html

したがって、私の問題は、上部のボタンにマウスを合わせると幅が変わることです。しかし、下のリンクでそうすると、そうではありません。比較的同じコードを使用したため、変更する必要があります。だから、何が問題なのかわからない。コードを約 30 分間精査しましたが、修正が見つかりません。CSS/HTML コーディングが初歩的であることは承知していますが、私は初心者であり、皆さんから学べば学ぶほど上達すると思います。お時間をいただきありがとうございます。他の投稿をご覧になった場合は、多くの投稿をして申し訳ありません。ウェブサイトの計画で頭がいっぱいになっていると言っていただけると思います。

4

2 に答える 2

1

トランジションは問題なく動作します。ただし、A要素はインライン要素です。幅は無視されます。追加display: block;して大丈夫です。

于 2012-11-13T01:26:50.813 に答える
0

あなたが持っている場所：

 #links ul li a:hover

あなたも追加した場合、それは機能しますか...

 #links ul a:hover

もちろん同じスタイリングで。

于 2012-11-12T23:12:13.420 に答える