0

私の質問は、私が一般的なものであると確信していたものですが、私の努力の最善を尽くして、これに関するチュートリアルをまったく見つけることができません。

ウェブサイトのテキストと画像のナビゲーションメニューを作成したいと思っています。多くの人がこのようなことをしたいと思うように思えますが、私は単純な概念を完全に見逃しているか、多くの人がこのようなことをしようとはしていません。

私の正確な目標：上部に画像、下部にCSSスタイルのテキストを含むナビゲーションメニューを作成します。画像にフォーカスまたはカーソルを合わせると、画像が変化し、テキストが1つのアイテムであるかのように変化します。

私の問題：私のボタンで、テキストにカーソルを合わせると、画像とテキストが変わります。画像にカーソルを合わせると、画像のみが2つの別個のエンティティであるかのように変化します。

私のHTML：

    <!DOCTYPE HTML>
    <html>
    <head>

      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charset="UTF-8" />

      <link rel="stylesheet" type="text/css" href="test2.css" />

    </head>

    <body>


        <ul>
        <li id="onlineRugStore"><a href="#"id="test"><b>Button</b></a></li> 
        </ul>

。

CSS：

    body{
    background-color:#e8f1c4;  
    }

    #onlineRugStore a{
    display:block;
    width:191px;
    height:107px;
    background:url('bestimages/test/worktest.gif') 0 0;
    }

    #onlineRugStore a:hover{
    background:url('bestimages/test/worktest.gif') 0 -107px;
    }

    #test b{
    position:absolute;
    text-align:center;
    margin:110px 0 0 0;
    font-size:18px;
    color:white;
    text-decoration:none;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    width:191px;
    height:24px;
    background-color:#cc7bd6;
    opacity:0.45;
    filter:alpha(opacity=45);
    padding:4px 0 0 0;
    }

    #test b:hover{
    opacity:1.0;
    }

    ul{
    list-style-type:none;
    }

私が話していることの例は、http：//kokorugs.com/test2.phpで見ることができます。

すべての努力を尽くした後、これは不可能かもしれないと思い、次のWebサイトで実用的な例を見つけました：http： //www.amazeelabs.com/en （ナビゲーションメニューに注意してください）。

私はありとあらゆる助けに感謝します。

ハッピーホリデー、ラファエル

4

1 に答える 1

2

JSfiddle を作成しました: http://jsfiddle.net/drXng/

CSS に表示されるコードは、何が起こっているかを明確に説明する必要があります。

/*CSS you want to apply to the element wrapping both the text and picture*/
.both {
 opacity: 0.5;
width: 200px;
height: 200px;
display: block;
}

/*CSS you want to apply to the text only before it is hovered*/
.text {
background-color: green;
}

/*CSS you want to apply to the picture only before it is hovered*/
.picture {
  width: 50px;
  height: 50px;
}

/*CSS you want to apply to the element wrapping both both the text and picture after hovered*/
.both:hover {
opacity: 1;
}

/*CSS you want to apply to text when both are hovered*/
.both:hover .text {
  background-color: blue;
}

/*CSS you want to apply to picture when both are hovered*/
.both:hover .picture {
background-color: red;
}​

.bothあなたの場合、に変更することで簡単に実行できますul。たとえば、次の css は、#test b内部に何かが置かれている限り、 の不透明度を変更しulます。

ul:hover #test b{
opacity:1.0;
}

PS アドバイスとして、可能であればCSS で ID セレクターを使用しないようにしてください。:)

于 2012-12-19T01:38:24.057 に答える