SORU
5 Kasım 2012, PAZARTESİ


Birleştirin :sonra :hover

CSS :hover :after birleştirmek istiyorum. Ben temelde bir liste var ve selected sınıf maddenin ok şekli :after kullanarak başvurdu. Aynı süpürdü üzerinde olan nesneler için gerçek olmak istiyorum ama oynayamıyorum pek işe koyulalım. İşte kod

#alertlist
{
    list-style:none;
    width: 250px;
}
#alertlist li
{
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
    color: #f0f0f0;
    background-color: #303030;
}

#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

<ul id="alertlist">
    <li>Alert 123</li>
    <li class="selected">Alert 123</li>
    <li>Alert 123</li>
</ul>

CEVAP
5 Kasım 2012, PAZARTESİ


Sadece sizin için :after Ekle #alertlist li:hover #alertlist li.selected seçici ile aynı şekilde seçici:

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Andrew_Huang

    Andrew_Huang

    10 ŞUBAT 2006
  • ipsy Makeup Tips

    ipsy Makeup

    19 ŞUBAT 2009
  • segtlim

    segtlim

    21 EKİM 2008