CSS :hover mfano

Mifano na matumizi

CSS :hover Mfano wengi hutumika kuwa na uchaguzi wa elementi wakati wa kushika mwelekeo wa kifua cha kifungu.

Mivuno::hover Mfano wengi inaweza kutumika kwa kila elementi, na hasa hasa viungo.

Mivuno:Tafuta: :link Kusha na mtindo wa viungo wa kama hawajachaguliwa, kusoma kwa: :visited Kusha na mtindo wa viungo wa wakilichaguliwa, kusoma kwa: :active Kusha na mtindo wa viungo wa kifo

Tahadhari:katika uharibifu wa CSS,:hover inaonekana kufikia :link na :visitedakaa na (iliofikia) kabla ya kuwa inashughulikia!

Mivuno

Mfano 1

Chaguo na kusha na mtindo wa kifungu cha viungo wakati wa kushika mwelekeo wa kifua cha kifungu:

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

Jifunze kufanya

Mfano 2

Chaguo na kusha na mtindo wa elementzi ya <p>, <h1> na <a> wakati wa kushika mwelekeo wa kifua cha kifungu:

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

Jifunze kufanya

Mfano 3

Chagua na weka maelezo ya muungano tofauti ya kinavyotumika, kinavyofikia, kilichopewa kwa kusikia na kilichopewa kwa uharibifu:

/* Kina kilichopewa kwa kumtumika kwa mara ya kwanza */
a:link {
  color: green;
}
/* Kina kilichopewa kwa kufikia */
a:visited {
  color: green;
}
/* Kina kilichopewa kwa kusikia kwa kina cha msikio */
a:hover {
  color: red;
}
/* Kina kilichopewa kwa uharibifu */
a:active {
  color: yellow;
}

Jifunze kufanya

Mfano 4

Weka maelezo ya muungano tofauti:

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

Jifunze kufanya

Mfano 5

Onyesha kwenye kina <span> kuzingatia kufichwa kina <div> (kama kina ya maelezo):

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

Jifunze kufanya

Mfano 6

Onyesha na kufichwa menyu ya kusambaza kwenye msikio:

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

Jifunze kufanya

Makala ya CSS

:hover {
  maudhui ya css;
}

Maelezo ya kidhunia

Mfano wa kusaidia

数字 katika tabea zinaonyesha sababu ya kumwengi wa kusaidia kufanana kwa programu za kusoma hii kifupi.

Makao yafupi

Makala:CSS muungano wa kina

Makala:CSS kifupi