CSS :hover ਪਸੂਦੋ ਕਲਾਸ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

CSS :hover ਪਸੂਦੋ ਕਲਾਸ ਮਉਸ ਦੇ ਸਮੇਂ ਇਲੈਕਟ੍ਰੋਨਸ ਚੁਣਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ

ਸੁਝਾਅ::hover ਪਸੂਦੋ ਕਲਾਸ ਸਾਰੇ ਇਲੈਕਟ੍ਰੋਨਸ ਲਈ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ ਨਾ ਕੇ ਸਿਰਫ਼ ਲਿੰਕ ਲਈ

ਸੁਝਾਅ:ਕਿਰਪਾ ਕਰਕੇ :link ਨਾ ਦੇਖੇ ਹੋਏ ਪੰਨੇ ਦੇ ਲਿੰਕ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰਨ ਲਈ :visited ਪਿਛਲੇ ਪੰਨੇ ਦੇ ਲਿੰਕ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰਨ ਲਈ :active ਸਰਗਰਮ ਲਿੰਕ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ

ਧਿਆਨ:ਕ੍ਰਿਮਸ ਵਿੱਚ: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

ਸਪੈਨ ਇਲੈਕਟ੍ਰੌਨ ਉੱਤੇ ਹੋਵਰ ਕਰੋ ਤਾਂ ਡਿਵ ਇਲੈਕਟ੍ਰੌਨ ਦਿਖਾਉਣ (ਟੂਲਟਿੱਪ ਵਰਗਾ):

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 declarations;
}

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਪਰੋਜੈਕਟ ਦਾ ਪਹਿਲਾ ਬ੍ਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਤੇ ਪੰਨੇ ਵਿੱਚ ਦਿੱਤਾ ਗਿਆ ਹੈ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆਚਾਰਾਂਕ ਦਾ ਸੰਦਰਭ:CSS ਲਿੰਕ

ਸਿੱਖਿਆਚਾਰਾਂਕ ਦਾ ਸੰਦਰਭ:CSS ਪਰੋਜੈਕਟ