- ベストアンサー
CSSでの個別hover設定
yambejpの回答
おおよそイメージ通りでしたね えーと、aに属性がついているものを.hoeでクリアするのですから それなりに面倒です 方法としては・・・ (1)クラスをわける <li><a class="foo" href="#"> サービス概要</a></li> <li><a class="hae" href="#"> aaaaa</a></li> などして、aにbackgroudをつけずに.fooに設定すれば、haeには 影響がありません (2)透明な画像を用意する 透明な画像(透過gifなど)を用意しておいて、haeのbackgroudには それを指定する。 のどちらかが簡単でよろしいかと。
関連するQ&A
- IE以外で:hoverの内容が無視されてしまう
独学でCSSを勉強している者です。 ちょっと躓いてしまったのでどなたかお知恵を貸してください。 下記のように指定しています。 IE6ではちゃんとhover時に背景色が変わるのですが、 opera,firefoxで動作確認したところいずれもうまく動作しませんでした。 どこが間違っているのか分からず、困っています。 御指摘頂けると助かります。 ---------------- pagelist.htmlの内容 ---------------- <ul class="comout"> <li class="comrow compar">ページリスト <ul class="comin"> <li class="comrow"><a href="001.html">1</a></li> <li class="comrow"><a href="002.html">2</a></li> </ul> </li> </ul> ---------------- 001.htmlの内容 ---------------- <ul class="comout"> <li class="comrow compar">ページリスト <ul class="comin"> <li class="comrow comself"><a href="001.html">1</a></li> <li class="comrow"><a href="002.html">2</a></li> </ul> </li> </ul> ---------------- スタイルシート ---------------- ul.comout{ padding:0px; margin:0px 0px 20px 0px; } ul.comin{ padding:0px; margin:0px 0px 0px 10px; } li.compar{ display:block !important; padding:5px; margin:0px; } li.comrow{ display:inline; color:#395158; list-style-type:none; text-decoration:none; } li.comrow a:link{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } li.comrow a:visited{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } }li.comrow a:hover{ background-color:#D1C9BD; border:1px #EFECE7 solid; text-decoration:none; color:#395158; } li.comself a{ background-color:#D1C9BD !important; border:1px #EFECE7 solid !important; } --------------------------- 以上です。 いままでIEのみで動作確認をしてきたため、 今回のような自体にどう対応して良いのか分かりません。 よろしくお願いします。
- ベストアンサー
- HTML
- css hover ie6
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。) (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- IE6バグ css hover
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
- 【CSSについて】リストをフロートするとfirefoxでボーダーが消える
お世話になっております。 今回は、CSSの質問です。 IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。 ***HTML*** <ul id="navi"> <li><a href="#">風景</a></li> <li><a href="#"> 生き物</a></li> <li><a href="#">建物</a></li> <li><a href="#">乗り物</a></li> </ul> ***CSS*** #navi { margin-left: 0px; padding-left: 0px; list-style-type: none; width: 600px; border-right: 1px solid #333333; } #navi li { float: left; border-left: 1px solid #000000; border-top: 1px solid #333333; border-bottom: 1px solid #000000; width: 149px; } #navi a { display: block; background-color: #ff9900; color: #FFFFFF; text-decoration: none; width: 149px; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5em; } #navi a:hover { background: #00FFFF; color: #000000; } IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。 これもハックしなきゃならないものですか？ とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSの継承について...
CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます） 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？ それとも根本的な何かを履き違えしているのでしょうか？ 宜しくお願い致しますm(_ _)m
- 締切済み
- デザイナー・クリエイティブ職
- xhtmlでページを作ったらcssのhoverの部分がFirefoxで
xhtmlでページを作ったらcssのhoverの部分がFirefoxでは動くのにIEでは上手く動きません。 どうしたらいいのでしょうか？ --xhtml-- <div class="menu"> <ul> <li><a href="#"target="content">link1</a><br/></li> <li><a href="#"target="content">link2</a><br/></li> <li><a href="#"target="content">link3</a><br/></li> </ul> </div> --css-- .menu{ width:100%; position:absolute; bottom:25%; font-weight:bolder; filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } .menu ul{ margin:0; padding:0; } .menu li{ margin-bottom:1px; list-style-type:none; float:none; font-size:1.3em; line-height:0; } .menu li a{ display:block; width:100%; line-height:25px; background-color:#ba2029; color:#ffffff; text-align:center; text-decoration:none; border-left:solid 10px #880000; } .menu li a:hover{ background-color:#95195a; }
- ベストアンサー
- HTML
- IE9でa:hoverが効かない
IE9でa:hoverが効かなくて困っています。 droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか？ 以下ソースです。 html <div id="navi"> <div class="inner"> <ul> <li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する --> <li> <a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する --> <ul> <li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効かない --> <li><a href="メニュー1-2のURL">メニュー1-2</a></li><!-- ←ここのa:hoverが効かない --> </ul> </li> </ul> </div> </div> ｃｓｓ #navi { background: url(naviの背景画像のURL) repeat-x left top #000000; border-bottom: 1px solid #000000; -moz-box-shadow: 0 0 3px #484848;/* Firefox用 */ -webkit-box-shadow: 0 0 3px #484848;/* Safari,Google Chrome用 */ box-shadow: 0px 0px 3px rgba(0,0,0,0.5); } #navi .inner { margin: 0 auto; width: 940px; } #navi .inner ul li { float: left; margin: 15px 0; padding: 0 10px; position: relative; } #navi .inner ul li a { padding: 5px 11px; color: #ffffff; text-decoration: none; } #navi .inner ul li a:hover { border: 1px solid #ffffff; padding: 5px 10px; color: #333333; background: #ffffff; background:linear-gradient(#eaeeee, #e2e3e3); background: -moz-linear-gradient(top, #eaeeee, #e2e3e3);/* Firefox用 */ background: -webkit-gradient(linear, left top, left bottom, from(#eaeeee), to(#e2e3e3));/* Safari,Google Chrome用 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3);/* IE6,7 */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3)";/* IE8 */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; behavior: url(/PIE.htc); } #navi .inner ul li ul { position: absolute; top: 39px; left: 0; zoom: 1; display: none; background: #dae4d7; border: 1px solid #8db0a0; border-top: none; border-bottom: none; font-size: 85%; width: 150px; } #navi .inner ul li ul li { float: none; padding: 0; margin: 0; background: none; } #navi .inner ul li ul li:hover { background: none; } #navi .inner ul li ul li a { color: #2d595f; text-align: left; display: block; background: url(icon画像のURL) no-repeat 5px center; border-top: 1px solid #ffffff; border-bottom: 1px solid #8db0a0; padding: 5px 5px 5px 20px; } #navi .inner ul li ul li a:hover { background: url(hoer用icon画像のURL) no-repeat 5px center #2d595f; color: #ffffff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-top: 1px solid #2d595f; border-bottom: 1px solid #2d595f; border-left: none; border-right: none; padding: 5px 5px 5px 20px; margin: 0; } どこがおかしいのかわからないのでnaviv部分全体を載せます。 宜しくお願いします。
- ベストアンサー
- CSS
- CSS画像・文字混在縦メニュー
画像と文字使った縦メニューを作成しています。 レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。 どうぞお知恵をお貸しください。 よろしくお願いいたします。 【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>
- ベストアンサー
- HTML
- ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。
ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。 http://www.asahi-home.info/test/asahi-home/index2.html でページ上部「ホーム」「会社情報」「住宅情報」などがあるメニューの部分です。 これが、ブラウザによっては青い画像の下に隠れてしまうようです。 当方PCでIE６、IE7、FireFox２．０、Safari（バージョン不明）で確認したところ問題なく表示されます。 クライアント様からこの部分の表示崩れがおきているとのクレームがありました。（クライアント様のブラウザ不明） その部分のCSSは以下のようになっています。 アドバイス宜しくお願いいたします。 /* ナビ*/ #navi { text-align: left; } #navi li { float: left; } #navi li a{ display: block; text-indent: -9999px; } #navi li#menu01 a{ background: url("../image/navi01.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu02 a{ background: url("../image/navi02.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu03 a{ background: url("../image/navi03.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu04 a{ background: url("../image/navi04.gif") no-repeat; width: 119px; height: 40px; } #navi li#menu05 a{ background: url("../image/navi05.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu06 a{ background: url("../image/navi06.gif") no-repeat; width: 103px; height: 40px; } #navi ul li.active a { background-position: 0 -40px absolute !important; } #navi ul li a:hover { background-position: 0 -40px absolute !important; text-decoration: none; } /* メインイメージ（青の画像部分）*/ #bgmainImage { clear: both; margin: 0 auto; height: 200px; background: url("../image/main_image_bg.gif") no-repeat center bottom; } .mainImage { margin: 0 auto; width: 800px; } /* メイン コンテンツ部分*/ #bgmain { margin: 0 auto; background-color: #fff; } #main { margin: 0 auto; width: 800px; padding: 8px 0 0 0; } #main h3 { clear: both; margin: 15px 0 0 0; }
- 締切済み
- HTML
お礼
ありがとうございます。 （１）の方法でうまくいきました。 大変助かりました。