マウスをボタンに持っていった時に色が変わる方法

このトピックには6件の返信、1人の参加者があり、最後に楓により8年、 10ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿

2017年10月26日 2:47 AM #56570

楓

ゲスト

いつも参考にさせて頂いています。
ありがとうございます。

ブログ内に設置したボタンにマウスを置いた時に色が変わるようにしたいのですが、思うようにいかず苦戦しています。

サンプル1(これを修正したい)

現状、ボタンの上にマウスを持ってくると上のサンプル1の画像のように、黒枠に白背景に変わってしまいます。

この状態を下のサンプル2のように変更したいと思っています。

サンプル2(こういう風にしたい)

このサンプル2は、「楽天」のボタンの上にマウスを置いている状態です。

サンプル1もサンプル2も全く同じCSS、投稿画面内の記述です(サンプル2のブログからコピペしてサンプル1のSimplicityのブログに貼り付けただけです)

違いはサンプル1はSimplicity2を、サンプル2はLuxenritasを使っていることくらいです。

CSSの記述内容

/* カッテネ */
.kattene {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 1em;
  box-sizing: border-box; }

.kattene__imgpart {
  text-align: center; }

  .kattene__imgpart img {
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    -o-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    -ms-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); }

.kattene__description {
  font-size: 0.9em; }

.kattene__btns {
  width: 100%;
  margin-top: 1.2em; }

  .kattene__btns:after {
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    content: "."; }

  .kattene__btns > div {
    float: left;
    margin-bottom: 5px; }

  .kattene__btns .btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
   }

  .kattene__btns.__three > div {
    width: 32.66667%; }

    .kattene__btns.__three > div:not(:last-child) {
      margin-right: 1%; }

  .kattene__btns.__two > div {
    width: 49.5%; }

    .kattene__btns.__two > div:nth-child(odd) {
      margin-right: 1%; }

@media screen and (max-width: 900px) {

  .kattene__btns.__four > div {
    width: 49.5%; }

    .kattene__btns.__four > div:nth-child(odd) {
      margin-right: 1%; }

  .kattene__btns.__one > div {
    width: 50%;
    margin-left: 25%; } }
@media screen and (min-width: 901px) {

  .kattene {
    display: table;
    width: 100%; }

  .kattene__imgpart {
    display: table-cell;
    width: 20%; }

  .kattene__infopart {
    display: table-cell;
    vertical-align: top;
    position: relative;
    padding-left: 10px;
    width: 80%; }

  .kattene__btns {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    padding-right: 10px; }

    .kattene__btns.__four > div {
      width: 24.25%; }

      .kattene__btns.__four > div:not(:last-child) {
        margin-right: 1%; }

    .kattene__btns.__two > div {
      width: 49.5%; }

      .kattene__btns.__two > div:not(:last-child) {
        margin-right: 1%; }

    .kattene__btns.__one > div {
      width: 49.5%;
      float: right; } }

.btn {
  appearance: none;
  background-color: #54c0d1;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: 0.75em 1.5em;
  text-decoration: none;
  transition: background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; }

  .btn:hover, .btn:focus {
    background-color: #439aa7;
    color: #fff; }

  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

    .btn:disabled:hover {
      background-color: #54c0d1; }

.btn.__small {
  padding: 0.55em;
  font-size: 0.9em; }

.btn.__orange {
  background-color: #ff8c00;
  -webkit-box-shadow: 0 5px 0 #cc7a01;
  -moz-box-shadow: 0 5px 0 #cc7a01;
  box-shadow: 0 5px 0 #cc7a01;
  -o-box-shadow: 0 5px 0 #cc7a01;
  -ms-box-shadow: 0 5px 0 #cc7a01;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

 .btn.__orange:hover {
    background-color: #cc7a01; }

  .btn.__orange i {
    font-weight: bold; }

    .btn.__orange i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.btn.__blue {
  background-color: #007dcd;
  -webkit-box-shadow: 0 5px 0 #0064a4;
  -moz-box-shadow: 0 5px 0 #0064a4;
  box-shadow: 0 5px 0 #0064a4;
  -o-box-shadow: 0 5px 0 #0064a4;
  -ms-box-shadow: 0 5px 0 #0064a4;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .btn.__blue:hover {
    background-color: #0064a4; }

  .btn.__blue i {
    font-weight: bold; }

    .btn.__blue i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.btn.__red {
  background-color: #ce0f19;
  -webkit-box-shadow: 0 5px 0 #9b0003;
  -moz-box-shadow: 0 5px 0 #9b0003;
  box-shadow: 0 5px 0 #9b0003;
  -o-box-shadow: 0 5px 0 #9b0003;
  -ms-box-shadow: 0 5px 0 #9b0003;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .btn.__red:hover {
    background-color: #9b0003; }

  .btn.__red i {
    font-weight: bold; }

    .btn.__red i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.btn.__green {
  background-color: #0BBD80;
  -webkit-box-shadow: 0 5px 0 #099766;
  -moz-box-shadow: 0 5px 0 #099766;
  box-shadow: 0 5px 0 #099766;
  -o-box-shadow: 0 5px 0 #099766;
  -ms-box-shadow: 0 5px 0 #099766;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .btn.__green:hover {
    background-color: #099766; }

  .btn.__green i {
    font-weight: bold; }

    .btn.__green i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }
/* カッテネここまで*/

記事投稿画面での内容

<div class="kattene">
  【楽天画像のみリンク240*240】
  <div class="kattene__infopart">
  【楽天テキストのみリンク、18フォントでテキスト部分を囲む】
    <div class="kattene__description">【説明(メーカー名、発売日など)】</div>
    <div class="kattene__btns __four">
      <div><a class="btn __red" target="_blank" href="【商品のURL】">楽天</a></div>
      <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div>
    </div>
  </div>
</div>

これはサンプル1のサイトもサンプル2のサイトも同じ設定で行っています。

なお、この記述はこちらのページを参考にしています。
http://webfood.info/make-kattene/

原因がお分かりになる方がいらっしゃいましたら、ご指導いただけると助かります。

どうぞよろしくお願い致します。

2017年10月26日 8:24 AM #56573
かうたっく
ゲスト
<a class="btn __red" target="_blank" href="【商品のURL】">楽天</a>
```
.__red:hover {
	background-color: #9b0003;
}
```
アンダーバーから始まってますが、これは不具合起こす可能性があったかどうかは不明ですが、HTMLの指定通りでしたらこんな感じで反映すると思います。

キャッシュを削除しても反映しないとき、.kattene__btns .__red:hoverみたいに親要素のセレクタを追加してください。

優先順位を強くしても反映しないなら、該当ページのURLを置いてもらえますか。
2017年10月26日 12:18 PM #56579

楓
ゲスト

かうたっくさん

こんにちは。
アドバイスありがとうございます。

ご提案いただいたようにCSSを書き換えてみたんですが、状況は変わらずでした。

普段Chromeを使っているんですが、ChromeはCtrl押しながらリロードしても変わらず、他のブラウザ(IEとFirefox)でもダメでした。

当該ページのURLを置いておきますので、ご確認いただけますでしょうか。

https://temporubato.net/744.html

どうぞよろしくお願い致します。
2017年10月26日 5:27 PM #56582
かうたっく
ゲスト
反映しない原因ですが、以下の優先順位が高いので反映しないのと、
```
#container a.btn:hover {
	color: #333;
	background-color: #fff;
	border: 2px solid #000;
}
```
メディアクエリ@media screen and (min-width: 901px) { この中にスタイル指定 }CSSを書いているのが原因です。この記載はPC画面の大画面のみで反映する場所です。

全ての環境で反映させる場合、スタイルシートの一番下に以下を追記してキャッシュのない状態で確認していただけますか。
```
#container .kattene__btns .__red:hover {
	background-color: #9b0003;
}
```
2017年10月27日 3:03 AM #56588

楓
ゲスト

かうたっくさん

確認が遅くなり申し訳ありません。

ご指示いただいたようにCSSの最後に追記したら、背景の色がちゃんと変わりました！
ありがとうございます。

ただ・・・

なぜか黒い枠線と「楽天」とか「Amazon」の文字が黒になる現象は残ってしまっています。

サンプル3(サンプル1の修正後)

これを↓のサンプル2のようにすることは出来るでしょうか？(サンプル2は左の「楽天」にマウスを置いています)

サンプル2

重ね重ね申し訳ありません。
どうぞよろしくお願い致します。

2017年10月27日 7:54 AM #56589

かうたっく

ゲスト

こんな感じで、貼り付けてください。

#container .kattene__btns .__red:hover {
	background-color: #9b0003;
}

#container .kattene__btns .__orange:hover {
	background-color: #cc7a01;
}

#container .kattene__btns .__red:hover,
#container .kattene__btns .__orange:hover {
	color: #fff;
	border: none;
}