css hover in IE11 not returning to unhover style

i have social buttons like in this page: http://demo.themexpert.com/joomla/appy/ (on the right) when you hover this buttons in ie11 and move back they dont return to the previous state. is it a bug in IE ? is there a way to walkaround

Answers


Try and change this:

.social-icons li a { display:block;}

To this:

.social-icons li a { display:inline-block;}

Seems to fix the issue for me in IE11


Working Fiddle

I have created the fiddle fixing the issue. Tested in IE-11 works fine.

HTML

<ul id="social">
    <li>
        <a href="#" class="fb">
            <div class="social-icon"></div>
        </a>
    </li>
</ul>

CSS

#social
{
    position: absolute;
    right: 0;
}
li
{
    list-style: none;
}
.social-icon
{
    height: 40px;
    width: 120px;
    background: red;
}
.fb
{
    margin-top: 5px;
    margin-right: -75px; 
    display: block;
}
.fb:hover
{
    margin-right: 0px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}

Need Your Help

Xcode provisioning profile issues when trying to run applications on a iOS device

iphone ios xcode cs193p

I'm following the excellent Stanford CS193P course (Fall 2011) on iTunes U:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.