1

Web サイトのホバー オーバー ボタンをクリック可能にすることに興味がありますが、方法がわかりません。私のウェブサイトはこちら: http://mathisbeauty.org/

ページ自体の関連コードは次のようになります

<div id="bar">
    <div class="menuLink"><a href="index.html">Home</a></div>
    <div class="menuLink"><a href="videos.html">Videos</a></div>
    <div class="menuLink"><a href="articles.html">Articles</a></div>
    <div class="menuLink"><a href="links.html">Links</a></div>
    <div class="menuLink"><a href="aboutme.html">About me</a></div>
</div>

そしてCCSは（私は信じています！）

.menuLink
{
    height:36px;
    width: 120px;
    text-align:center;
    float:left;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#252F33;
    padding-top:19px;
}
menuLink:hover
{
background: url(bar2.png) repeat-x;
}

どんな助けでも大歓迎です。

4

4 に答える 4

3

あなたのコードは正しいですが、これはあなたが探しているものですか?

http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/

于 2012-12-20T05:43:29.540 に答える
2

あなたのリンクはクリック可能です。問題は、現在リンクされているのはテキストだけであることです。アンカーを格納するコンテナと同じサイズにするだけです.menuLink。

次の css を追加すると、動作するはずです。

.menuLink a {
    height: 36px;
    width: 120px;
    display: block;
}

編集：

代わりにこれを使用すると、完全なボックスが得られます。正直なところ、上半分が含まれていないことに気づきませんでした。

.menuLink a {
    height: 57px;
    width: 120px;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 18px;
}
于 2012-12-20T05:42:43.563 に答える
2

ホバーされた領域全体をリンク要素にしたいと思います。

タグ付けする<div class="menuLink">要素をラップする必要があります 。<a>

これも機能します： 

<a class="menuLink" href="index.html"><span>Home</span></a>
于 2012-12-20T05:46:37.783 に答える
0 
 .menuLink a {display: block;padding: 21px 0; }
.menuLink {padding:0;}

aこれにより、親 div と一致するようにの幅が設定され.menuLinkます。

于 2012-12-20T05:48:01.850 に答える