マウスホバーで黒塗りの装飾が消えるようにしたい

Question

前提・実現したいこと

https://codepen.io/adamruf/pen/GZwdrY?editors=1100
こちらのRedactedをマウスホバーで黒塗りが消え文字が見えるようにしたいです。

該当のソースコード

• HTML

<p class="redacted">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>

• CSS
  .redacted span {
  position: relative;
  white-space: pre;
  }
  .redacted span:after {
  background: black;
  border-radius: 0.1em;
  box-shadow: 0 0 1px rgba(0,0,0,0.35);
  content: " ";
  width: 100%;
  height: 1.2em;
  left: 0;
  position: absolute;
  transform: skewY(-5deg) rotate(5deg);
  }

試したこと

• ホバー時の記述
  .redacted span:hover {
  visibility: hidden;
  }
  文字ごと消えてしまいました。

色々調べつつ試したのですが分からなかったのでお力をお借りしたいです。
初心者丸出しで申し訳ありませんが、よろしくお願いいたします。

Answer 1

transition プロパティを利用し、 span 要素のホバー時に span 要素の ::after 擬似要素に適用されている box-shadow, background-color, z-index プロパティを変更すれば良いです。これに加えて、::after 擬似要素へ top プロパティを追加し、以下のようにすることで質問者さんの実現したいことが行えると思います (動作確認用リンク)。

<div class="col-md-4">
  <h2>Redacted</h2>
  <p class="redacted">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>
</div>

$white: #fafafa;

body {
  background: $white;
  color: rgba(0, 0, 0, 0.84);
  font-size: 20px;
  line-height: 1.5;
  padding-top: 1em;
}

.redacted span {
  position: relative;
  white-space: pre;

  &:hover {
    &::after {
      box-shadow: none; /* 追加 */
      background: transparent; /* 追加 */
      z-index: -1; /* 追加 */
    }
  }

  &:after {
    background: black;
    border-radius: 0.1em;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
    content: " ";
    width: 100%;
    height: 1.2em;
    top: 0; /* 追加 */
    left: 0;
    position: absolute;
    transform: skewY(-5deg) rotate(5deg);
    transition: 1s all; /* 追加 */
  }
}

Comments

[rinne1015]

ありがとうございます！想像通りの動きです。大変助かりましたm(__)m

Answer 2

.redacted span:hover:after {
  background-color: transparent;
}

Comments

[thyda.eiqau]

おや、低評価いただいてますね。与えられた命題はクリアしていると認識していましたが不備等ありましたか。ご教示くださいませ