window
トップページ > 過去ログ > 記事閲覧
*A hoverの個別設定
日時: 2006/03/05 02:28
識別: ID:x2bjMAjvlF51
名前: レインボー
はじめまして。色々やってみてもわからずじまいで困ってしまいました。
過去ログ検索してみたものの、なかなかみつけられず
質問させていただきます。もし同じ内容があったらすみません。
使用しているのは、ホームページビルダーver.8になります。
どなたかご教授お願いいたします

ページ作成時、スタイルシートを利用してボタンのように見えるリンク
<a> <a hover>の設定をしました。

同ページ内で、リンクした文字を一部通常にもどしたい場合、
<A>に対してはstyleで設定orクラス指定を行うこと位は
なんとかわかるのですが
<A HOVER>に対してはどのように設定すればよいのでしょう
説明が下手なので例をあげますと、

ページ全体で設定<head>内挿入タグ↓

<STYLE type="text/css">
<!--
A{
font-weight : bold;
color : navy;
}
A:HOVER{
font-weight : bold;
color : aqua;
text-decoration : underline;
}
-->
</STYLE>

と設定したらページ全体に反映されリンクの変化は同じですよね。

同ページ内でリンクを個別に変化させたい場合
<A href="#" style="color : lime;">あ</A>
で<a>の変更まではできるのですが、
<a hover>マウスが上に乗った場合の変化を変更するタグがわからないのです...
こうすればいいかな?で色々試してもエラーばっかりでてきちゃって
よろしくお願いします

Re: A hoverの個別設定 ( No.1 )
日時: 2006/03/05 10:10
名前: Newのり太

こちらの過去ログにもあると思いますが、
https://aimix.jp/nmz/namazu.cgi?query=hover&sort=score&whence=0
他所でまとめ記事を書きましたので、
そちらを貼っておきます。
http://hpb.cool.ne.jp/wforum/wforum.cgi?&no=2799&mode=allread#2802
Re: A hoverの個別設定 ( No.2 )
日時: 2006/03/05 17:16
名前: レインボー

Newのり太様、ありがとうございます。
お教えくださいましたぺーじより
http://www.wsb.jp/hpb/css/link.htm#05を参考にして
設定を試みました。
「スタイルシートマネージャーを開く→追加ボタンをクリック→「クラスのスタイルを設定」を選択→クラス名に A.test:HOVER と入力→後はスタイルシートマネージャーを使い、好きなスタイルを設定します。→リンクの挿入を行います」
書かれてる内容とおりにと試してみたものの、
クラス名に A.test:HOVER と入力すると
無効な文字列とでて設定できません。.test:hoverとしても
うまくできず・・(><)
<A href="***.htm" target="_***" class="test">としましたら
<A>の変更はできるもののやはりA HOVERはかわらないのです。
Re: A hoverの個別設定 ( No.4 )
日時: 2006/03/05 17:48
名前: レインボー

すみません、再度失礼します。
oioiooi様のご指摘どおり、全角にしてしまいました(^_^;)。
再度設定しなおしてみたところ
またわからないことが・・。
http://shinichi-kai.ciao.jp/test.html

説明下手な上理解力が不足してご面倒おかけしましてすみません。
宜しくお願いします
Re: A hoverの個別設定 ( No.5 )
日時: 2006/03/08 09:31
名前: Newのり太

<style type="text/css">
<!--
/*通常のリンク*/
a{
background-color: white;
text-decoration: none;
border: 1px solid black;
width: 100px;
height: 16px;
text-align: center;
}
a:hover{
background-color: #ffff80;
border: 1px solid gray;
}

/*クラスtestのリンク*/
a.test{
何が: どないやねん; /*好きなスタイルを設定*/
}
a.test:hover{
border-style: none;
color: black;
background-color: #f8d05a;

-->
</style>

<!-- 中略 -->

<p><a href="#">LINK</a></p>

<p><a href="#" class="test">LINK</a></p>


ていうか、ボタン風のスタイルは、クラスのほうへ設定するのが普通です。
まあ、テストですけどね。


// 一部スペルミスがありましたので、訂正しました。(^^ゞ
Re: A hoverの個別設定 ( No.6 )
日時: 2006/03/06 02:07
名前: レインボー
状態: 解決!

Newのり太様!!
ありがとうございます!!できました。
とても助かりました。

リンクを個別にスタイル設定したい場合は
aも、a:hoverと同じクラス名に指定すればよいのですね。
aを変更する場合
クラス指定 a.○○ で設定
それで、a:hoverも変更する場合は、
クラスに
a.○○:hoverと指定

リンクする場合は
<a href="#" class="○○">LINK</a>
とする
○○は任意の文字でクラスのaとa:hoverと同じ半角英数文字
で良いのですよね?

おおっ!!感激です。
本当にどうもありがとうございました。
これまで悩んでたことがわかりとてもすっきりしました。
さすがです。NEWのり太様最高です♪感謝いたします。



↑NEWのり太様のご指摘の箇所を訂正させていただきました。前回の確認であった、
aの前に.はいらないですね(^_^;)。私の中の「THE思い込み」です。設定では無事にできていたのにこの書き込みに間違いがありました。お手を煩わせました。書式ミスが多い私、お許し下さい。大変失礼しました。m(__)mありがとうございました。
Re: A hoverの個別設定 ( No.7 )
日時: 2006/03/06 00:09
名前: Newのり太

細かいことですが、キカイというものは、
書式を間違えたりするととたんに反応しなくなったりしますのでご注意を。

> aも、a hoverと同じクラス名に指定すればよいのですね。 ← a:hover
> aを変更する場合
> クラス指定 .a.○○ で設定 ← a.○○
> それで、a hoverも変更する場合は、 ← a:hover
> クラスに
> .a○○:hoverと指定 ←a.○○:hover