CSS : vurgulu Seçici
Örnek
Fareyle üzerine geldiğinizde bir bağlantı seçin ve stil verin:
a:hover
{
background-color: yellow;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Seçici :hover
, fareyle üzerlerine geldiğinizde öğeleri seçmek için kullanılır.
İpucu: :hover seçicisi yalnızca bağlantılarda değil, tüm öğelerde kullanılabilir.
İpucu: Ziyaret edilmemiş sayfalara bağlantılara stil vermek için :link seçiciyi, ziyaret edilen sayfalara bağlantılara stil vermek için :visited seçiciyi ve aktif bağlantıya stil vermek için :active seçiciyi kullanın.
Not: Etkili olması için :hover CSS tanımında :link ve :visited (varsa) sonrasında gelmelidir!
Sürüm: | CSS1 |
---|
Tarayıcı Desteği
Tablodaki sayılar, seçiciyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Not: IE'de :hover seçicisinin <a> öğesi dışındaki öğeler üzerinde çalışması için bir <!DOCTYPE> bildirilmelidir.
CSS Sözdizimi
:hover {
css declarations;
}
Daha fazla örnek
Örnek
Fareyle üzerine geldiğinizde bir <p>, <h1> ve <a> öğesini seçin ve stil verin:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
Örnek
Ziyaret edilmeyen, ziyaret edilen, üzerine gelinen ve etkin bağlantıları seçin ve biçimlendirin:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
Örnek
Farklı stiller içeren stil bağlantıları:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Örnek
Bir <div> öğesini göstermek için bir <span> öğesinin üzerine gelin (bir araç ipucu gibi):
div {
display: none;
}
span:hover + div {
display: block;
}
Örnek
Fareyle üzerine gelindiğinde bir "açılır" menüyü gösterin ve gizleyin:
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;}
İlgili Sayfalar
CSS eğitimi: CSS Bağlantıları
CSS eğitimi: CSS Sözde sınıfları