প্রতিক্রিয়া ইনলাইন সিএসএস শৈলী: একটি বাস্তবায়ন কিভাবে?

Question

আমি প্রতিক্রিয়ার ইনলাইন সিএসএস প্যাটার্নটি বেশ পছন্দ করি এবং এটি ব্যবহারের সিদ্ধান্ত নিয়েছি।

তবে আপনি :hoverএবং অনুরূপ নির্বাচক ব্যবহার করতে পারবেন না । তাহলে ইনলাইন সিএসএস স্টাইলগুলি ব্যবহারের সময় হাইলাইট-অন-হোভার কার্যকর করার সর্বোত্তম উপায় কী?

# রিয়্যাকটিজস থেকে একটি পরামর্শ হ'ল একটি Clickableউপাদান থাকা এবং এটি এটি ব্যবহার করা:

<Clickable>
    <Link />
</Clickable>

Clickableএকটি আছে hoveredরাষ্ট্র ও লিঙ্ক সাজসরঞ্জাম যেমন প্রেরণ করা হয়। যাইহোক, Clickable(আমি এটি প্রয়োগ) গোপন Linkএকটি divতাই এটি সেট করতে পারেন যে onMouseEnterএবং onMouseLeaveএটি। এটি বিষয়গুলি যদিও কিছুটা জটিল করে তোলে (উদাহরণস্বরূপ spanকোনও divআচরণের সাথে জড়িয়ে থাকা অন্যরকম আচরণ করে span)।

একটি সহজ উপায় আছে কি?

Comments

আপনি একেবারে সঠিক - অনুকরণ করার একমাত্র উপায়: ইনলাইন শৈলীর সাথে ইত্যাদি নির্বাচকদের ব্যবহার onMouseEnterএবং onMouseLeave। এর সঠিক বাস্তবায়ন সম্পর্কে - এটি সম্পূর্ণরূপে আপনার উপর নির্ভর করে। আপনার নির্দিষ্ট উদাহরণটি দেখার জন্য, কেন <Clickable/>মোড়কে এটিকে তৈরি করবেন না span?

— ক্রিস হাউটন

আমি এক্সট্রাক্টেক্সট ওয়েবপ্যাক প্লাগইনের পাশাপাশি বাহ্যিক স্টাইল শিটগুলি ব্যবহার করার পরামর্শ দেব, আপনি যদি কখনও সার্ভাররেন্ডারে ইচ্ছুক হন তবে এটি আপনাকে দীর্ঘায়িত করতে সহায়তা করবে অন্যথায় আপনি রেডিয়াম github.com/FormidableLabs/radium

— abhirathore2006

প্রতিক্রিয়াতে সিএসএস / এসএসএস-এর সমস্ত সম্ভাবনার অনুকরণের জন্য বর্তমানে স্টাইল্ড কম্পোনেন্টই সেরা সমাধান।

— আহমদ বেহজাদি

Answer 1

আমিও একই পরিস্থিতিতে আছি। সত্যিই উপাদানগুলিতে স্টাইলিং রাখার প্যাটার্নের মতো তবে হোভারের রাজ্যগুলি শেষ বাধা হিসাবে মনে হচ্ছে।

আমি যা করেছি তা হ'ল এমন একটি মিক্সিন লিখছিলাম যা আপনি আপনার উপাদানগুলিতে যুক্ত করতে পারেন যা হোভার স্টেটগুলির প্রয়োজন। এই মিশ্রণটি hoveredআপনার উপাদানগুলির রাজ্যে একটি নতুন সম্পত্তি যুক্ত করবে । এটি trueব্যবহারকারীর উপাদানটির মূল ডোম নোডের উপরে ঘোরাফেরা করে এবং falseযদি ব্যবহারকারীরা উপাদানটি ছেড়ে যায় তবে এটি সেট করা হবে to

এখন আপনার উপাদান রেন্ডার ফাংশনে আপনি এমন কিছু করতে পারেন:

<button style={m(
     this.styles.container,
     this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>

এখন প্রতিবারের রাজ্যের hoveredরাজ্যটি পরিবর্তন করে উপাদানটি পুনরায় রেন্ডার করবে।

আমি এর জন্য একটি স্যান্ডবক্স রেপোও তৈরি করেছি যা আমি নিজেই এই ধরণের কয়েকটি পরীক্ষার জন্য ব্যবহার করি। আপনি যদি আমার বাস্তবায়নের উদাহরণ দেখতে চান তবে এটি পরীক্ষা করে দেখুন।

https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin

Comments

আর দৌড়ানোর জন্য ভাল সমাধান নয়, রেডিয়াম ভাল পছন্দ বা একটি বাহ্যিক স্টাইলশিট ব্যবহার করা হবে

— abhirathore2006

@ abhirathore2006 রেডিয়াম একইভাবে কাজ করে এবং বিশেষতঃ বাহ্যিক স্টাইলশিটটি ব্যবহার না করে কীভাবে এটি করা যায় তা প্রশ্ন করা হয়

— চার্লি মার্টিন ২

ভ্যানিলা স্প্রেড অপারেটরটি ব্যবহার করা কি আরও অর্থবোধ করে না?

— PAT-O-MATION

Answer 2

আমি মনে করি onMouseEnter এবং onMouseLeave হল উপায়, তবে আমি অতিরিক্ত মোড়কের উপাদানটির প্রয়োজন দেখছি না। আমি এটি কীভাবে এটি প্রয়োগ করেছি:

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
}

তারপরে আপনি লিঙ্কটির স্টাইলটি পরিবর্তন করতে হোভারের (সত্য / মিথ্যা) স্থিতি ব্যবহার করতে পারেন।

Comments

এটি আবশ্যক বলে মনে হয় :hoverতবে তা নয়:focus

— অ্যাডাম টটল

@ অ্যাডাম টটলের প্রতিক্রিয়াটির একটি onFocusইভেন্ট রয়েছে; তাই আপনার জন্য একই জিনিস করতে পারে :focusযেমন :hover, পরিবর্তে প্রয়োজন ছাড়া onMouseEnterএবং onMouseLeaveআপনি শুধুমাত্র প্রয়োজন হবেonFocus

— জনাথন

সচেতন হন যে এই পদ্ধতিটি মূল থ্রেডে কার্যকর করতে বাধ্য করে যেখানে সাধারণ সিএসএস ইভেন্টগুলি আরও দক্ষতার সাথে পরিচালিত হয়।

— হ্যাম্পাস আহলগ্রেন

Answer 3

দেরিতে পার্টিতে তবে সমাধান নিয়ে আসুন। হোভার এনথ চাইল্ড ইত্যাদির জন্য শৈলীর সংজ্ঞা দিতে আপনি "এবং" ব্যবহার করতে পারেন:

day: {
    display: "flex",
    flex: "1",
    justifyContent: "center",
    alignItems: "center",
    width: "50px",
    height: "50px",
    transition: "all 0.2s",
    borderLeft: "solid 1px #cccccc",

    "&:hover": {
      background: "#efefef"
    },
    "&:last-child": {
      borderRight: "solid 1px #cccccc"
    }
},

Comments

এটি কোনও সমাধান নয়, প্রশ্নটি কীভাবে এটি অনলাইনে সিএসএস দিয়ে করবেন, আলাদা স্টাইল শীট দিয়ে নয়।

— এমি

ডুড, কাছাকাছি একবার দেখুন। এটি হ'ল ইনলাইন স্টাইল।

— জারোসোয়া ওলাজাও

এটি প্রতিক্রিয়া নিয়ে কাজ করে না। আপনার স্টাইলড-উপাদানগুলির মতো অতিরিক্ত গ্রন্থাগার দরকার।

— জিজি

এটি ইনলাইন শৈলীতে কাজ করে না, উদাহরণটি বিভ্রান্তি এনে দেয়। যদি এটি সত্যিই কাজ করে তবে দয়া করে সম্পূর্ণ উপাদান সহ একটি আরও ভাল উদাহরণ সরবরাহ করুন।

— আলেকজান্দ্রে

অসাধারণ! একটি যাদুমন্ত্র মত কাজ করে!

— ফায়োডর

Answer 4

আপনি রেডিয়াম ব্যবহার করতে পারেন - এটি রিঅ্যাকটিজেএস সহ ইনলাইন শৈলীর জন্য একটি ওপেন সোর্স সরঞ্জাম। এটি আপনার প্রয়োজনীয় নির্বাচকদের যুক্ত করে। খুব জনপ্রিয়, এটি পরীক্ষা করে দেখুন - এনপিএম এ রেডিয়াম

Comments

আমি এই পোস্টটি জুড়ে এসেছি, আপনি কীভাবে নিম্নলিখিত পরিস্থিতিতে রডিয়াম বাস্তবায়ন করবেন? module.exports = React.createClass({ displayName: 'App',})

@ রাখায়াত আপনি হয় একে এটিকে আবদ্ধ করতে পারেন module.exports = Radium(React.createClass({ displayName: 'App',}))বা শ্রেণিকে একটি মান হিসাবে নির্ধারিত করতে পারেন এবং এর @Radiumউপরের ডকোটারটি গিথুব

— ফ্রেমডেবল

সিএসএস নামে এই দুর্দান্ত

— জিনিসটিও রয়েছে

Answer 5

সম্পূর্ণ সিএসএস সমর্থন হ'ল কারণেই এই বিশাল পরিমাণ সিএসএসইএনজেএস লাইব্রেরি রয়েছে, দক্ষতার সাথে এটি করার জন্য আপনাকে ইনলাইন স্টাইলগুলি না করে আসল সিএসএস তৈরি করতে হবে। আরও বড় সিস্টেমে ইনলাইন শৈলীর প্রতিক্রিয়া অনেক ধীর। দাবি অস্বীকার - আমি জেএসএস বজায় রাখি ।

Answer 6

মেড স্টাইল ইট - অংশ হিসাবে - এই কারণে (অন্যরা অন্যান্য লিবস / সিনট্যাক্স বাস্তবায়নের সাথে দ্বিমত পোষণ করে এবং সম্পত্তি মূল্যবোধের পূর্বনির্ধারিতকরণের জন্য ইনলাইন স্টাইলিংয়ের সমর্থনের অভাব হয়)। বিশ্বাস করুন আমাদের জাভাস্ক্রিপ্টে কেবল সিএসএস লিখতে সক্ষম হওয়া উচিত এবং এইচটিএমএল-সিএসএস-জেএস-তে সম্পূর্ণ স্ব-উপাদান রয়েছে have ES5 / ES6 টেম্পলেট স্ট্রিং সহ আমরা এখন করতে পারি এবং এটি খুব সুন্দরও হতে পারে! :)

npm install style-it --save

ক্রিয়ামূলক সিনট্যাক্স ( JSFIDDLE )

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .intro:hover {
        color: red;
      }
    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}

export default Intro;

জেএসএক্স সিনট্যাক্স ( জেএসএফআইডিডিএল )

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .intro:hover {
          color: red;
        }
      `}

        <p className="intro">CSS-in-JS made simple -- just Style It.</p>
      </Style>
    );
  }
}

export default Intro;

Comments

আমি জেএসএক্স সিন্ট্যাক্স উদাহরণে লক্ষ্য করেছি, জেএসফিডাল লিঙ্কটিতে সঠিক কোড রয়েছে তবে এখানে প্রদর্শিত উদাহরণটি ক্লোজিং স্টাইল ট্যাগের পরে বন্ধ হওয়া বন্ধনী অনুপস্থিত এবং সম্ভবত অনুপস্থিত বন্ধনীর কারণেই ইন্ডেন্টেশন বন্ধ রয়েছে।

— ব্র্যাডলেগস্মিথ

Answer 7

উপর যোগ করার পদ্ধতি যোনাথনের উত্তর , এখানে ঘটনা ফোকাস এবং সক্রিয় রাজ্যের আবরণ, এবং একটি ব্যবহার onMouseOverপরিবর্তে onMouseEnterআধুনিক ইচ্ছা বুদ্বুদ যেহেতু আপনি লক্ষ্য ঘটনা প্রয়োগ করা হচ্ছে মধ্যে যে কোনো শিশু উপাদান আছে।

var Link = React.createClass({

  getInitialState: function(){
    return {hover: false, active: false, focus: false}
  },

  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },

  toggleActive: function(){
    this.setState({active: !this.state.active})
  },

  toggleFocus: function(){
    this.setState({focus: !this.state.focus})
  },

  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else if (this.state.active) {
      linkStyle = {backgroundColor: 'blue'}
    } else if (this.state.focus) {
      linkStyle = {backgroundColor: 'purple'}
    } 

    return(
      <div>
        <a style={linkStyle} 
          onMouseOver={this.toggleHover} 
          onMouseOut={this.toggleHover} 
          onMouseUp={this.toggleActive} 
          onMouseDown={this.toggleActive} 
          onFocus={this.toggleFocus}> 
          Link 
        </a>
      </div>
    )
  }

Answer 8

প্রতিক্রিয়া হুকগুলি ব্যবহার করে আমার সমাধানটি এখানে দেওয়া হল। এটি স্প্রেড অপারেটর এবং টেরিনারি অপারেটরকে একত্রিত করে।

style.js

export default {
  normal:{
    background: 'purple',
    color: '#ffffff'
  },
  hover: {
    background: 'red'
  }
}

Button.js

import React, {useState} from 'react';
import style from './style.js'

function Button(){

  const [hover, setHover] = useState(false);

  return(
    <button
      onMouseEnter={()=>{
        setHover(true);
      }}
      onMouseLeave={()=>{
        setHover(false);
      }}
      style={{
        ...style.normal,
        ...(hover ? style.hover : null)
      }}>

        MyButtonText

    </button>
  )
}

Answer 9

শুভেচ্ছা স্টাইল-উপাদান এবং প্রতিক্রিয়া-রাউটার V4 আপনি এটা করতে পারেন:

import {NavLink} from 'react-router-dom'

const Link = styled(NavLink)`     
  background: blue;

  &:hover {
    color: white;
  }
`

...
<Clickable><Link to="/somewhere">somewhere</Link></Clickable>

Answer 10

প্রতিক্রিয়া উপাদানটির অভ্যন্তরে ইনলাইন স্টাইল থাকার জন্য এটি দুর্দান্ত হ্যাক হতে পারে (এবং এটি ব্যবহার করে: CSS ফাংশনটি হোভার করুন):

...

<style>
  {`.galleryThumbnail.selected:hover{outline:2px solid #00c6af}`}
</style>

...

Answer 11

টাইপস্টাইল চেকআউটআপনি যদি সাথে প্রতিক্রিয়া ব্যবহার করেন তবে ।

নীচে এর জন্য একটি নমুনা কোড রয়েছে: হোভার

import {style} from "typestyle";

/** convert a style object to a CSS class name */
const niceColors = style({
  transition: 'color .2s',
  color: 'blue',
  $nest: {
    '&:hover': {
      color: 'red'
    }
  }
});

<h1 className={niceColors}>Hello world</h1>

Answer 12

আপনি বিকল্প হিসাবে সিএসএস মডিউলগুলি ব্যবহার করতে পারেন , এবং অতিরিক্তভাবে CSS-মডিউলগুলি প্রতিক্রিয়া জানান ক্লাসের নাম ম্যাপিংয়ের জন্য ।

এইভাবে আপনি আপনার শৈলীগুলি নিম্নরূপে আমদানি করতে পারেন এবং আপনার উপাদানগুলিতে স্থানীয়ভাবে স্কোপ করা সাধারণ CSS ব্যবহার করতে পারেন:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

এখানে একটি ওয়েবপ্যাক সিএসএস মডিউলগুলির উদাহরণ রয়েছে

Comments

এফওয়াইআই: আপনি যদি উল্কাটি ব্যবহার করেন তবে এই প্যাকেজটি দেখুন: github.com/nathantreid/meteor-css-modules । আমি নিজেকে এ পর্যন্ত ব্যবহার করে দুর্দান্ত সাফল্য পেয়েছি।

— সর্পিলিস

উপাদানগুলির প্রতিক্রিয়া স্টাইল করার এটি দুর্দান্ত উপায়, তবে আপনাকে ইনলাইন স্টাইলগুলির সমস্ত নিয়ন্ত্রণ দেয় না। উদাহরণস্বরূপ, :hoverরানডিয়ামে আপনি স্টাইল পরিবর্তন করতে পারবেন না যেমন আপনি রেডিয়াম বা অন্য কোনও onMouseOverভিত্তিক সমাধানের সাথে করতে পারেন

— চার্লি মার্টিন

Answer 13

onMouseOver এবং onMouseLeave সেটস্টেট সহ প্রথমে আমার কাছে কিছুটা ওভারহেডের মতো মনে হয়েছিল - তবে এটি যেমন প্রতিক্রিয়া দেখায় এটি আমার কাছে সবচেয়ে সহজ এবং পরিষ্কার সমাধান বলে মনে হয়।

উদাহরণস্বরূপ একটি থেরিং সিএসএস সার্ভারসাইড রেন্ডারিংও একটি ভাল সমাধান এবং প্রতিক্রিয়া উপাদানগুলি আরও পরিষ্কার রাখে।

যদি আপনাকে উপাদানগুলিতে গতিশীল শৈলী যুক্ত করতে না হয় (উদাহরণস্বরূপ একটি থেরিং) আপনার ইনলাইন স্টাইলগুলি মোটেও ব্যবহার করা উচিত নয় তবে পরিবর্তে CSS ক্লাস ব্যবহার করা উচিত।

এইচটিএমএল / জেএসএক্স পরিষ্কার এবং সরল রাখার জন্য এটি একটি traditionalতিহ্যবাহী এইচটিএমএল / সিএসএস বিধি।

Answer 14

সহজ উপায়টি হল টের্নারি অপারেটরটি

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={this.state.hover ? {"backgroundColor": 'red'}: {"backgroundColor": 'blue'}} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }

Answer 15

হুক ব্যবহার করে:

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: 'all .2s ease-in-out',
  } : {
    opacity: .5, transition: 'all .2s ease-in-out',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};

Answer 16

আমি আমার সাম্প্রতিক অ্যাপ্লিকেশনগুলির মধ্যে এটির জন্য একটি সুন্দর হ্যাক-ইশ সমাধান ব্যবহার করি যা আমার উদ্দেশ্যে কাজ করে এবং আমি ভ্যানিলা জেএসে কাস্টম হোভার সেটিংস ফাংশনগুলি লেখার চেয়ে দ্রুত পেয়েছি (যদিও, আমি স্বীকার করেছি, বেশিরভাগ পরিবেশে সেরা অভ্যাস নাও হতে পারে) ..) সুতরাং, আপনি যদি এখনও আগ্রহী হন তবে তা এখানে।

আমি কেবল ইনলাইন জাভাস্ক্রিপ্ট স্টাইলগুলি ধরে রাখার স্বার্থে একটি প্যারেন্ট উপাদান তৈরি করি, তারপরে ক্লাসের নাম বা আইডি সহ একটি শিশু যা আমার সিএসএস স্টাইলশীটটি আমার ডেডিকেটেড সিএসএস ফাইলে হোভার শৈলীটি ল্যাচ করবে এবং লিখবে। এটি কাজ করে কারণ আরও দানাদার শিশু উপাদান উত্তরাধিকারের মাধ্যমে ইনলাইন জেএস শৈলীগুলি গ্রহণ করে তবে এর হোভার শৈলীগুলি CSS ফাইল দ্বারা ওভাররাইড করে।

সুতরাং মূলত, আমার আসল সিএসএস ফাইলটি হওর ইফেক্টগুলি ধরে রাখার একমাত্র উদ্দেশ্যে রয়েছে, অন্য কিছুই নয়। এটি এটি বেশ সংক্ষিপ্ত এবং পরিচালনা করা সহজ করে তোলে এবং আমাকে আমার ইন-লাইন প্রতিক্রিয়া উপাদান উপাদানগুলিতে ভারী-উত্তোলন করতে দেয়।

এখানে একটি উদাহরণ:

const styles = {
  container: {
    height: '3em',
    backgroundColor: 'white',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    borderBottom: '1px solid gainsboro',
  },
  parent: {
    display: 'flex',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    color: 'darkgrey',
  },
  child: {
    width: '6em',
    textAlign: 'center',
    verticalAlign: 'middle',
    lineHeight: '3em',
  },
};

var NavBar = (props) => {
  const menuOptions = ['home', 'blog', 'projects', 'about'];

  return (
    <div style={styles.container}>
      <div style={styles.parent}>
        {menuOptions.map((page) => <div className={'navBarOption'} style={styles.child} key={page}>{page}</div> )}
      </div>
    </div>
  );
};


ReactDOM.render(
  <NavBar/>,
  document.getElementById('app')
);

.navBarOption:hover {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

লক্ষ্য করুন যে "শিশু" ইনলাইন শৈলীতে "রঙ" বৈশিষ্ট্য সেট নেই। যদি এটি হয়ে থাকে তবে এটি কাজ করবে না কারণ ইনলাইন শৈলীটি আমার স্টাইলশীটের চেয়ে প্রাধান্য পাবে।

Answer 17

আমি যদি এই উত্তরটি দিয়ে থাকি তবে আমি 100% নিশ্চিত নই, তবে সিএসএস সিমুলেট করার জন্য এটির কৌশলটি আমি ব্যবহার করি: রঙ এবং চিত্রগুলির ইনলাইন সহ হোভার এফেক্ট।

`This works best with an image`

class TestHover extends React.PureComponent {
render() {
const landingImage = {     
"backgroundImage": "url(https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg)",
"BackgroundColor": "Red", `this can be any color`
"minHeight": "100%",
"backgroundAttachment": "fixed",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat",
"backgroundSize": "cover", 
"opacity": "0.8", `the hove trick is here in the opcaity slightly see through gives the effect when the background color changes`
    }

  return (
    <aside className="menu">
        <div className="menu-item">
          <div style={landingImage}>SOME TEXT</div>
        </div>
    </aside>
      ); 
  }
}
ReactDOM.render(
    <TestHover />,
  document.getElementById("root")
);

সিএসএস:

.menu {
top: 2.70em;
bottom: 0px;
width: 100%;
position: absolute;
}

.menu-item {
cursor: pointer;
height: 100%;
font-size: 2em;
line-height: 1.3em;
color: #000;
font-family: "Poppins";
font-style: italic;
font-weight: 800;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}

হাওয়ার আগে

.menu-item:nth-child(1) {
color: white;
background-color: #001b37;
} 

হোভারে

.menu-item:nth-child(1):hover {
color: green;
background-color: white;
}

উদাহরণ: https://codepen.io/roryfn/pen/dxyYqj?editors=0011

Answer 18

<Hoverable hoverStyle={styles.linkHover}>
  <a href="https://example.com" style={styles.link}>
    Go
  </a>
</Hoverable>

যেখানে লাভযোগ্য হিসাবে সংজ্ঞায়িত করা হয়:

function Hoverable(props) {
  const [hover, setHover] = useState(false);

  const child = Children.only(props.children);

  const onHoverChange = useCallback(
    e => {
      const name = e.type === "mouseenter" ? "onMouseEnter" : "onMouseLeave";
      setHover(!hover);
      if (child.props[name]) {
        child.props[name](e);
      }
    },
    [setHover, hover, child]
  );

  return React.cloneElement(child, {
    onMouseEnter: onHoverChange,
    onMouseLeave: onHoverChange,
    style: Object.assign({}, child.props.style, hover ? props.hoverStyle : {})
  });
}