CSS :hover ప్రత్యక్షం

నిర్వచనం మరియు ఉపయోగం

CSS :hover మౌస్ హోవర్ ప్రదర్శించే ఎలిమెంట్స్ ను ఎంపిక చేయడానికి ఉపయోగించబడుతుంది ప్రత్యక్షంగా.

సూచన::hover ప్రతి ఎలిమెంట్స్ కు ప్రత్యక్షంగా ఉపయోగించవచ్చు మరియు లింక్స్ కు మాత్రమే కాదు.

సూచన:ఉపయోగించండి :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> అంశాన్ని ప్రదర్శించండి (వంటి టూల్టిప్పులు):

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 ప్రత్యార్థకాలు