質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

14618閲覧

マウスオーバーした時にどのようにReactを用いて、画像の切り替えを行うか

Taka_Yamag

総合スコア29

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/12/05 10:49

import React, { Component } from 'react'; import { animateScroll as scroll } from 'react-scroll'; class ButtonComponent extends Component { scrollToTop = () => { scroll.scrollToTop(); }; render() { return( <div className="scroll scroll-up"> <div className="arrow bounce" style={{ Button }}> <img src="/images/button_shadow.png" onClick={this.scrollToTop}/> </div> </div> ); } } const Button= (props) => { return <img src="/images/Button_shadow.png"/>; }; export default ButtonComponent;

上記のようなコードがあります。
マウスオーバーした時には、/images/button_noshadow.png、してない時は/images/button_shadow.png
のコードにできるでしょうか?

できればこのコードの中だけで、css的に完結させたいのですが、何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

「このコードの中だけで、css的に完結させたい」に沿うとしたらこんな感じですかね。

JavaScript

1class ButtonComponent extends React.Component { 2 static style = ` 3 .button { 4 width: fit-content; 5 font-size: 0; 6 } 7 .button:hover .shadow, 8 .button .noshadow { 9 display: none; 10 } 11 .button .shadow, 12 .button:hover .noshadow { 13 display: initial; 14 } 15 `; 16 render() { 17 return( 18 <> 19 <style>{ButtonComponent.style}</style> 20 <div className="button"> 21 <img className="shadow" src="https://placehold.jp/250x50.png?text=shadow"/> 22 <img className="noshadow" src="https://placehold.jp/250x50.png?text=noshadow"/> 23 </div> 24 </> 25 ); 26 } 27}

動作サンプルです。

なおご存知のことかとも思いますがReactでのスタイリングは色々ありますのでまとまってる人様のブログを参考として挙げておきます。
Reactのコンポーネントのスタイリングをどうやるか

投稿2019/12/05 14:45

shinji709

総合スコア805

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

cssでの対処は思いつきませんが、jsでなら比較的簡単に実現出来ると思います、すみません。

画像のURLをステートとして持ち、onMouseEnteronMouseLeaveイベントハンドラを利用してステートを切り替えればいいのではないでしょうか。

下記の様なイメージです。

tsx

1import React, { Component } from 'react'; 2import { animateScroll as scroll } from 'react-scroll'; 3 4class ButtonComponent extends Component { 5 constructor() { 6 this.state = { 7 imageUrl: '/images/button_noshadow.png'; 8 }; 9 } 10 11 scrollToTop = () => { 12 scroll.scrollToTop(); 13 }; 14 15 render() { 16 return ( 17 <div 18 className="scroll scroll-up" 19 onMouseEnter={() => this.setState({ imageUrl: '/images/button_shadow.png' });} 20 onMouseLeave={() => this.setState({ imageUrl: '/images/button_noshadow.png' });} 21 > 22 <div className="arrow bounce" style={{ Button }}> 23 <img src={this.state.imageUrl} onClick={this.scrollToTop} /> 24 </div> 25 </div> 26 ); 27 } 28}

投稿2019/12/05 11:32

nobodytolove123

総合スコア61

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Taka_Yamag

2019/12/06 04:57

動きました!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問