マウスオーバー解除

Question

いつもお世話になっております。画像の上にマウスを載せたら文字がでてくるマウスオーバーを組み込んでるのですが、マスオーバーしなくても最初から文字が出ている状態に変更したいのですが、コードのどの部分から変更をすればよいのかわかりません…。ご教示していただけたら幸いです。使っているページURLhttps://www.rakuten.ne.jp/gold/tokeiten/feature/xc-monitor/index.html

Accepted Answer

ECマスターズの伊藤です。> 組み込んでるのですが、マスオーバーしなくても> 最初から文字が出ている状態に変更したいのですが、> コードのどの部分から変更をすればよいのかわかりません…。style.cssを下記の通り修正していただきますと、マウスオーバーしていない状態で表示されるようになると思いますので、お試しくださいませ。修正=====.tiles .tile:before {content: '';background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);width: 100%;height: 50%;opacity: 0;position: absolute;top: 100%;left: 0;z-index: 2;-webkit-transition-property: top, opacity;transition-property: top, opacity;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}=====↓↓↓=====.tiles .tile:before {content: '';background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);width: 100%;height: 50%;position: absolute;top: 50%;left: 0;z-index: 2;}=====修正=====.tiles .tile .details span {display: block;opacity: 0;position: relative;top: 100px;-webkit-transition-property: top, opacity;transition-property: top, opacity;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-delay: 0s;transition-delay: 0s;}=====↓↓↓=====.tiles .tile .details span {display: block;}=====削除=====.tiles .tile:hover:before,.tiles .tile:hover span {opacity: 1;}.tiles .tile:hover:before {top: 50%;}.tiles .tile:hover span {top: 0;}.tiles .tile:hover .title {-webkit-transition-delay: 0.15s;transition-delay: 0.15s;}.tiles .tile:hover .info {-webkit-transition-delay: 0.25s;transition-delay: 0.25s;}=====

Answer

ご回答ありがとうございます！解決いたしました。

マウスオーバー解除

カテゴリーから探す