- ベストアンサー
画像をホバーした時一つだけ半透明にしない
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
質問文内のCSSで img:hover を img:not(.no_transp):hover に書き換えます。 その後、半透明にしたくない画像にno_transpクラスを付け加えることでその画像はホバーで半透明になりません。
関連するQ&A
- 背景画像上に複数枚の画像配置について
お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 （図が下手ですみません） わかる方、ご教示をお願いします。
- 締切済み
- CSS
- ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSS3でIE9対応のtransition
以下のようにCSS3でマウスオーバー時に だんだんと右に動くようにしたいのですが 何か方法はありませんでしょうか？ WEBで探してみたのですが、対応方法が見つかりませんでした。 なにとぞよろしくお願いいたします。 .cover { background:gray; width:180px; height:100px; position:absolute; top:0; -moz-transition:left 0.3s ease; -webkit-transition:left 0.3s ease; transition:left 0.3s ease; } .slideleft .cover { left:0px; } .slideleft:hover .cover { left:120px; }
- ベストアンサー
- CSS
- float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？
- ベストアンサー
- HTML
- マウスがホバーした時に開くメニュー
webの初心者です。 class="title"にマウスがホバーした時に .menu : hoverに設定したアニメーションを動作させて マウスがホバーすると開くメニューを作りたいのですが この状態だとclass="menu"にホバーした時は開くのですが class="title"の上にマウスが乗るとメニューが閉じてしまいます。 どうにかしてclass="title"にホバーした時もメニューが開くようにしたいです。 伝わりにくかったらすいません。 どなたか分かる方おられましたら回答お願いします。 <body> <div class="wrap"> <div class="title"></div> <div class="menu"> <h1 id="m1"></h1> <h1 id="m2"></h1> <h1 id="m3"></h1> <h1 id="m4"></h1> <h1 id="m5"></h1> <h1 id="m6"></h1> </div> </div> </body> .menu { height: 620px; width: 150px; background-repeat: no-repeat; margin-left: 0px; background-image: url(../img/menu.gif); background-position: right; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -ms-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } .title { background-image: url(../img/title.gif); background-repeat: no-repeat; height: 620px; width: 130px; float: left; } .menu:hover { margin-left: 40px; }
- ベストアンサー
- CSS
- CSSで画像を同じ位置に重なり合わせるには？
お世話になります。 2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。 調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。（添付画像のような現象です） これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配置することはできないのでしょうか？ 素人ゆえおかしな質問しているかもしれませんが、どうかご教授お願いします。 現時点のHTML/CSSはこんな感じです。 HTML--- <div id="contens"> <div id="top_img_a"> <p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p> <p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p> </div> CSS---(本意ではありませんが、やむなくtop,left調整で位置を作っている段階です。) #top_img_a { width:900px; margin:0; padding:0; position:relative; top:0px; } .img_top { position:relative; z-index:1; top:0; left:25px; } .flame { position:relative; z-index:2; top:-216px; left:25px; }
- ベストアンサー
- CSS
- htmlについて教えてください
サイトを一から作っているのではなく、 ショッピングサイトの商品ページの一部分を htmlタグを使って作っています。 macで確認するとレイアウトは問題なくきれいに見れるのですが、 windowsで確認すると画像やテキストが崩れています。 これはなぜなのでしょうか？ このような感じで記述していました。 画像の上に画像を重ねて表示し、テキストをその上に表示したいのですが... <div style="position: relative;"><div align="center"> <img src="http://○○○.jpg" alt=""></div> <div style="position:absolute;left:40px;top:40px"> <b>テキスト</b></div> <div style="position:absolute;left:380px;top:100px;width:240px;"> テキスト</div> <div style="position:absolute;left:60px;top:100px"> <img src="http://○○○.jpg"></div> <div style="position:absolute;left:370px;top:22px"><img src="http://○○○.jpg"></div> </div></div> htmlの知識がほとんどないので、 なるべく易しく説明していただければ有り難いです・・・。 よろしくお願い致します。
- 締切済み
- HTML
- chromeのcss位置ズレについて
CSSのpositionで画像を上にかぶせて表示させています。 そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。 下記の２つのハックを使った場合、display:noneだと反映されたのですが positionにすると何も反映しなくなります。 ハックはpositionには効かない、などあるのでしょうか？ どなたか教えていただけますでしょうか。 よろしくお願いいたします。 ----------------------- body:nth-of-type(1) #selector { position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85; } ----------------------- @media screen and (-webkit-min-device-pixel-ratio:0){ #selector { position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85; } }
- ベストアンサー
- CSS
- スタイルシート a:activeで画像を変える
スタイルシートの設定で画像メニューの切替を行おうとしていたんですが a.activeの設定の時のみ画像切替の反応が見られません。 どうしたらいいでしょうか？ 切替はclip:rect(top right bottom left)を使って一枚の画像の表示範囲で切り換えています。 【htmlメニュー部分】 <div class="MENU"> <a href="./"><img src="btn001.png"></a> </div> <div class="MENU"> <a href="./"><img src="btn002.png"></a> </div> 【スタイルシート部分】 IMG.MENU{ position:absolute; } DIV.MENU{ border:none; position:relative; float:left; } DIV.MENU A:link IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:visited IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:hover IMG{ clip:rect(50px 133px 75px 0px); top:-50px; } DIV.MENU A:active IMG{ clip:rect(25px 133px 50px 0px); top:-25px; } よろしくお願いします。
- ベストアンサー
- CSS
お礼
無事半透明にならなくなりました 有難う御座います！！