Tepkide Hover'a Nasıl Stil Verilir

Giriş

Görsellerle çalışmak, arayüzümüzü etkileşimli tutmanın ve kullanıcının dikkatini çekmenin mükemmel bir yoludur. Ekranımızda nesnelerin animasyonlu olması benzersiz bir deneyim yaratır ve etkileşimi artırır.

Bu makalede, CSS kullanarak React'te fareyle üzerine gelme stilinin nasıl oluşturulacağını ve ayrıca satır içi fareyle üzerine gelme stilinin nasıl yapılacağını öğreneceğiz.

Hover, kullanıcının faresinin belirli bir öğenin üzerinde ve dışında olduğunu bilmesini sağlamak için belirli stiller eklememize olanak tanıyan sözde bir sınıftır. Bu yazı için bir kutu kullanacağız:

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

bu temel stile sahip olan:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

Temel olarak arka plan rengini şu şekilde değiştireceğiz: lightblue fare kutunun üzerindeyken ve fare kaldırıldığında varsayılan stiline döndürün.

Tepkide Hover'a Nasıl Stil Verilir

Buna iki yaklaşım vardır: harici ve satır içi. Harici, vurgulu için stil oluşturmayı kolaylaştıran ayrı bir CSS dosyasına sahip olmayı içerir, oysa satır içi stil, sözde sınıfla stil oluşturmamıza izin vermez, ancak bu makalede fare olaylarını kullanarak satır içi CSS'de fareyle üzerine gelme stilini öğreneceğiz.

Vurguluyu CSS Dış Stiliyle Tepki Verirken Nasıl Stil Verilir

Bu, HTML ve CSS'nin nasıl çalıştığına çok benzer; tek yapmamız gereken elemana a vermek className (Değil class) veya etiketi, hedefleyeceğimiz seçici olarak kullanın ve ardından vurgulu sözde sınıfa stil verin:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

Tek yaptığımız eklemek oldu :hover sözde sınıfı daha önce stillendirilmiş seçiciye dönüştürün ve fare öğenin üzerindeyken değiştirmek istediğimiz özelliklerden herhangi birini değiştirin.

Inline Styling ile Tepkide Hover Nasıl Stil Verilir

Satır içi stillendirmeyle, öğenin etiketi aracılığıyla stillendirmeyi kastediyoruz. style bağlanmak. Önceki kodu satır içi stile dönüştürmek istiyorsak:

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Bunun gibi stillerin Uygulamamızda tekrarlanması okumayı zorlaştırabilir; bu nedenle, eğer bir sayfada yalnızca tek bir nesneyi stillendiriyorsak ve bunun için bir dosya oluşturmaya gerek yoksa, bir stil nesnesi oluşturabiliriz:

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Şu ana kadar kutumuzu oluşturduk. React'ta satır içi CSS ile vurguyu stillendirmek için, satır içi stillerin yanı sıra bir durum kullanarak koşullu olarak ayarlarız. onMouseEnter ve onMouseLeave farenin ne zaman öğenin üzerinde olduğunu ve ne zaman olmadığını bize bildiren aksesuarlar:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Bu noktada, herhangi bir özelliği koşullu olarak şu şekilde biçimlendirebiliriz: *isHover* durum:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

Şu ana kadar bunu nasıl uygulayacağımızı gördük. Şimdi kodumuzu parçalara ayıralım ve neden kullandığımız sözdizimini kullandığımızı açıklayalım. Fareyle üzerine gelmenin ne zaman gerçekleştiğini belirten bir boole değerini saklayan bir durum oluşturarak başladık (true) ve aksi halde (varsayılan olarak false):

const [isHover, setIsHover] = useState(false);

Daha sonra, durumumuzu değiştirmek ve farenin kutunun üzerinde ve kutunun dışında olduğunu bilmek için div'e iki olay ekledik:

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

The onMouseEnter olay, fare öğeye girdiğinde tetiklenirken, onMouseLeave olay ayrıldığında tetiklenir. Bu olayların her birine durumu değiştirmek için kullandığımız bir fonksiyon atadık:

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

Biz state tetiklenen olaya dayalı olarak her işlevde. Son olarak, durumu yalnızca kutuyu koşullu olarak biçimlendirmek için kullanabiliriz. backgroundColor, aynı zamanda başka herhangi bir stil için:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

Tüm bunları bir araya getirdiğimizde, artık React with Inline stilinde fareyle üzerine gelme stilini belirleyebiliyoruz:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;

Sonuç

Bu makalede, hem harici stil hem de satır içi stil kullanarak React'te fareyle üzerine gelme stilini öğrendik. Satır içi stil tavsiye edilmese de, kullanmamız istendiğinde nasıl çalıştığını anlamak yararlıdır.