[福山]

お世話になっております。
アーカイブページのホバーアクションに関してご質問です。
デフォルト機能でアーカイブページの記事にホバーするとopcityが薄くなるような機能がついていると思うのですが、これを無しにしたいです。

【お使いの Snow Monkey のバージョン】20.0.1
【お使いの Snow Monkey Blocks のバージョン】19.2.0
【お使いの Snow Monkey Editor のバージョン】9.2.1
【お使いのブラウザ】chrome

### 実現したいこと

アーカイブの記事にホバーしたときのアクションを無しにしたい

### 発生している問題

アーカイブの記事にホバーしたときのアクションを無しにする方法が分からない

### 試したこと

<li class="c-entries__item">・・・</li>内にhoverをしたときにopcity:0.7;がつくようなcssがデフォルトであるのかなと思い探したのですが見当たらず、どのように実装しているのか分からない状態です。

### お聞きしたいこと

①どのように上記の機能を実装しているのか
②上記の機能を止めるにはどうすれば良いのか

以上冗長になり恐れ入りますが宜しくお願い申し上げます。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

色が暗くなるエフェクトですかね？ であれば下記の CSS で実装しています。

@media (hover: hover) and (pointer: fine) {
  .c-entries__item > a:active .c-entry-summary__figure > img,
  .c-entries__item > a:focus .c-entry-summary__figure > img,
  .c-entries__item > a:hover .c-entry-summary__figure > img {
    filter: brightness(80%);
  }
}

設定では無効化できないので、上記のスタイルを打ち消す CSS を追加することになります。例えば下記のような感じです。

.c-entries__item > a .c-entry-summary__figure > img {
  filter: none !important;
}

♥ 0

いいねをした人: 居ません

[GONSY]

テーマ（のCSS）に以下の記述があると思いますので、これを上書きするようなCSSを追記すると良いと思います。

.c-entries__item > a:active .c-entry-summary__body,
.c-entries__item > a:focus .c-entry-summary__body,
.c-entries__item > a:hover .c-entry-summary__body {
	opacity:.8
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

GONSY さん
あ！ そっち opacity でしたね！

♥ 1

いいねをした人:

[GONSY]

キタジマさん

デフォルト機能でアーカイブページの記事にホバーするとopcityが薄くなるような機能がついていると思うのですが、これを無しにしたいです。

とあったので、opacityのほうかと思いました。

福山さん
私の場合ですが、Chromeのデベロッパーツール（要素）で見つからない場合、該当のCSSを開き、c-entries__itemやhoverで検索して探します。
 

♥ 1

いいねをした人:

[福山]

GONSY さん、キタジマさん

お力添えありがとうございます。

頂いたご助言で修正できました。

 

”福山さん
私の場合ですが、Chromeのデベロッパーツール（要素）で見つからない場合、該当のCSSを開き、c-entries__itemやhoverで検索して探します。”

→そちらが一番良いですね、、検索ツールのこの部分でしか探しておりませんでした。。

今後は頂いた方法で探してみますね。トピック閉じさせていただきます。

♥ 2

いいねをした人:

[投稿者]

投稿