css - 访问链接时突出​​显示图像

Question

如何在 CSS 中使其在我单击图像后会被点亮？

我的PHP：

<div class="social-icons highlightit">
       <ul>
      <li><a href="http://150.254.36.80/wige/kandydaci/o-wydziale/"     target="_top" rel="me"><img src="/images/wydzial2.png'" title="Wydzial"/></a></li>           
    <li><a href="http://150.254.36.80/wige/studenci/komunikaty"   target="_top" rel="me"><img src="/images/studenci.png'" title="Studenci"/></a></li>           
       </ul>
     </div>

我的css文件：

    .social-icons {
    background: #000;
    position: fixed;
    right: 0;
    top: 22%;
    padding: 5px 0px;
    border: 1px solid #F27570;
    }
    .social-icons ul {
    margin: 0;
    }
    .social-icons li {
    list-style: none;
    background: none;
    padding: 5px 10px;
    margin: 0;
    }
   .social-icons li img {
   display: block;
    }

   .highlightit img{
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 0.5;
   }

   .highlightit:a.hover img{
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   -moz-opacity: 1;
   opacity: 1;
   }

我试着写

.highlightit:a.visited img{

}

但它不起作用:(

Answer 1

我认为你有你:的问题，你需要它更像......

.highlightit a:visited img{

Answer 2

确保它们按以下顺序排列：

.highlightit a:visited img, .highlightit a:hover img {
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   -moz-opacity: 1;
   opacity: 1;
}