1

画像でナビゲーションメニューを作成し、CSSトランジションと不透明度を使用して画像のグロー効果にマウスを合わせてアニメーション化しました。SEOの目的で、ナビゲーションメニューにテキストリンクを含めたいと思います。

グロー効果は、CSSbackground-imageとhtmlの前景画像を使用して行われます。マウスオーバーすると、前景画像の不透明度がゆっくりと0になり、下の背景画像が表示されます。

position:relative親divとを使用して、画像の上にテキストを配置する方法を考え出しposition:absoluteましたp。ただし、マウスをテキストの上に置くと、テキストが画像の上にあるため、画像の上にマウスを置いたとは見なされなくなります。その結果、グロー効果は機能しません。

フラッシュでは、あるオブジェクトにマウスオーバーすると、別のオブジェクトに変更が加えられるのは非常に簡単です。CSSでこれを行う方法はありますか？そうでない場合、javascriptは私が必要なことを行うことができますか？

編集

返信ありがとうございます。これがコードです。ごちゃごちゃしてしまったらお詫びします。私は何年もHTMLコーディングを行ったことがなく、CSSを使ったことがありません。

これまでのところ、最初のボタンにテキストとリンクを配置しただけです。

<div id="nav">
  <ul>
    <li><a href="index.htm"><p class="homebutton">HOME</p><img class="navbutton" src="_images/home-button.png" alt="Website Navigation. Home Button" title="Home" height="115" width="120" /></a></li>
    <li><img class="navbutton" src="_images/how-button.png" alt="Website Navigation. How To Use Our Services Button" title="How To Use Our Services" height="115" width="120" /></li>
    <li><img class="navbutton" src="_images/playstation-button.png" alt="Website Navigation. Playstation Repair Button" title="Playstation Repair" height="115" width="120" /></li>
    <li><img class="navbutton" src="_images/xbox-button.png" alt="Website Navigation. Xbox Repair Button" title="Xbox Repair" height="115" width="120" /></li>
    <li><img class="navbutton" src="_images/wii-button.png" alt="Website Navigation. Wii Repair Button" title="Wii Repair" height="115" width="120" /></li>
    <li><img class="navbutton" src="_images/reviews-button.png" alt="Website Navigation. Customer Reviews Button" title="Customer Reviews" height="115" width="120" /></li>
    <li><img class="navbutton" src="_images/map-button.png" alt="Website Navigation. Location And Map Button" title="Location and Map" height="115" width="120" /></li>
    <li><img class="navbutton" src="_images/contact-button.png" alt="Website Navigation. Contact Us Button" title="Contact Us" height="115" width="120" /></li>
  </ul>

<!-- end .nav --></div>

CSS

#nav {
  background-image: url(../_images/nav-bg.png);
  width:960px;
  height:115px;
  margin-bottom:10px;
  position:relative;
}

.navbutton {
  -webkit-transition:opacity 0.7s ease-in-out;
  -moz-transition:opacity 0.7s ease-in-out;
  -o-transition:opacity 0.7s ease-in-out;
  transition:opacity 0.7s ease-in-out;
  float:left;
}

img.navbutton:hover {
  opacity:0;
}      

.homebutton {
  position:absolute;
  left:19px;
  top:70px;
  color:rgba(255,255,255,1);
  font-weight:bold;
  font-size:16px;
}

編集2

わかりやすくするためにフィドルを作成しました：http：//jsfiddle.net/sK5q2/

ご覧のとおり、マウスをテキストの上に置いても画像はフェードしません。

4

2 に答える 2

4

更新された質問とフィドル（フィドルに感謝します！）に基づいて、修正があります：

http://jsfiddle.net/sK5q2/1/

CSSセレクターを次のように調整するのと同じくらい簡単でした。

変化する：img.navbutton:hover {

に：a:hover img.navbutton {

説明しようとしますが、おそらくそれで悪い仕事をします。;）

要素が次のような兄弟である場合...

<img />
<p>Text</p>

...スタイルを使って好きなように再配置できますが、互いにほとんど独立しています。CSSスタイルは上下に配置されていましたが、純粋に視覚的であり、それほど技術的ではありません。テキスト上にマウスを移動すると、要素から<img/>要素に移動したかのように表示されます<p/>。

上記のHTMLが表示されている場合は、マウスが視覚的な画像に触れたときのレイアウトを考えてください。<img/>コードで強調表示されます。次にテキストをタッチすると、<p/>は強調表示されますが、これは別の要素です。

さて、それをリンクでラップすると...

<a>
    <img />
    <p>Text</p>
</a>

...そして、のホットスポットとしてリンクをターゲットにしている:hover場合、マウスがまたはタグにも触れているかどうかに関係なく、常にリンクのホットスポットに触れています。<img/> <p/>

この意味で、画像に触れている場合は<a/>、要素だけでなくタグも強調表示されます<img/>。テキストに移動すると、<a/>タグは引き続き強調表示されますが、<p/>要素が強調表示されます。

重要なのは、CSSスタイルが「常に触れられる」要素をターゲットにしているということです<a/>。

申し訳ありませんが、思ったより説明が難しかったです。うまくいけば、それが役立ちます！=）

乾杯！

..元の投稿..

あなたの本当の問題は単にCSSの問題だと感じていますが、私はあなたが説明していることに基づいて概念実証フィドルを作成しました。

http://jsfiddle.net/7rU7L/

コンセプトは、DanCedarholmのCSS/ HTMLパターンサイトpea.rs（http://pea.rs/navigation/horizo ​​ntal-tabs ）から直接取得したスタイルを含む標準の水平方向の「タブ」リストです。

<li id="a"><a href="#"><img /><b>Ahy!</b></a></li>

コンセプトは、テキストと一緒に画像を内部に持つリンクがあるということです。この場合、<img />タグを使用して、背景を赤にし、幅/高さを固定してスタイルを設定しました。

<b/>次に、タグを画像の上に絶対に配置しました。

ホバー時に、<b/>タグの左の位置を調整します（たとえば、色ではありません）。

（この例では、簡単にするためにコードを省略しています）

li a:hover b{
    left:45px;
}

疑似クラスで親<a>タグをターゲットにして、スタイルを設定する子要素（この場合）を選択するだけです。:hover<b/>

ただし、CSS / HTMLにはもっとファンキーなことが起こっているように感じますが、これは、探していることを実行できることを示しています（リンクの子要素のスタイルを変更します）。

あなたがあなたの本当のコードを投稿するならば、私はそれを調べて私の答えを調整することができます。

お役に立てば幸いです。

乾杯！

于 2013-03-25T16:52:33.880 に答える
0

このようなもので試しましたか？： 

.textThatIwantToHover:hover, .imageThatIwantToAffect:hover{
    //some css
}
于 2013-03-25T16:34:40.550 に答える