CSS :hover 伪类

डेफ़ाइनिंग और उपयोग

CSS :hover प्रतीकांक माउस होवर पर एलिमेंट चुनने के लिए उपयोग किए जाते हैं。

सूचना：:hover प्रतीकांक (pseudo-classes) सभी एलिमेंट के लिए उपयोग में आते हैं, न केवल लिंक के लिए।

सूचना：कृपया :link देखा नहीं गया पृष्ठ के लिंक के स्टाइल सेट करने के लिए :visited देखा गया पृष्ठ के लिंक के स्टाइल सेट करने के लिए :active सक्रिय लिंक के स्टाइल सेट करें。

ध्यान दें：CSS डेफ़ाइनिंग में:hover जरूरी है कि यह :link और :visited!(यदि मौजूद है) तभी प्रभावी होगा！

इस्टांस

उदाहरण 1

माउस होवर पर लिंक के स्टाइल चुनें और सेट करें：

a:hover {
  background-color: yellow;
  font-size: 18px;
}

स्वयं अभ्यास करें

उदाहरण 2

माउस होवर पर <p>、<h1> और <a> एलिमेंट के स्टाइल चुनें और सेट करें：

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

स्वयं अभ्यास करें

उदाहरण 3

अनदेखी, देखा गया, होवर और सक्रिय लिंक की शैली चुनें और सेट करें:

/* देखा नहीं गया लिंक */
a:link {
  color: green;
}
/* देखा गया लिंक */
a:visited {
  color: green;
}
/* माउस पर टिपाया गया लिंक */
a:hover {
  color: red;
}
/* सक्रिय लिंक */
a:active {
  color: yellow;
}

स्वयं अभ्यास करें

उदाहरण 4

लिंक के लिए अलग-अलग शैली सेट करें:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

स्वयं अभ्यास करें

उदाहरण 5

डिव एलीमेंट को दिखाने के लिए <span> एलीमेंट पर टिपाएं (टूलटिप के समान):

div {
  display: none;
}
span:hover + div {
  display: block;
}

स्वयं अभ्यास करें

उदाहरण 6

माउस पर टिपाया जाने पर 'ड्रॉपडाउन' मेनू को दिखाएं और छुपाएं:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

स्वयं अभ्यास करें

CSS व्याकरण

:hover {
  css व्यक्तव्य;
}

तकनीकी विवरण

ब्राउज़र समर्थन

टेबल में दिए गए नंबर इस प्रचारण उपकरण के प्रथम समर्थक ब्राउज़र संस्करण को सूचित करते हैं।

संबंधित पृष्ठ

तालीमी:CSS लिंक

तालीमी:CSS उपकरण