Regarding hover in ie10

Question

I am trying to develop a website. I have written styling in CSS. It is working perfectly in Mozilla Firefox and Google Chrome but it is not behaving properly in Internet Explorer 10. I am trying to hover on some carded layout's made using bootstrap and tiles, so if I hover on the card the border color should change and the text inside that card should become bold. I could some how manage to get the text bold but I am not able to see the border color change when I hover.

I need to know what the solution is and figure out something which will make sure that the styling is same across the browsers.

<div class="col-sm-6 col-md-4 col-lg-4" align="center">
        <span class="tile tile-account">
            <a href="#" onclick="return doubleClick()" class="block">
                <strong class="tile-heading landingpageheader tileTextStyle">
                    Change my name</strong>

              </a>
        </span>
    </div>

The styling in CSS:

.tile {
    display: block;
    background: #fff;
    border: 2px solid;
    border-color:#ccc;
    border-radius:8px;
    cursor: pointer;
    margin-bottom: 20px;
    ;
    overflow: hidden
}

.tile>a:HOVER .landingpageheader{
    font-weight: bold;
}

.tile>a:hover{
    border: 2px solid;
    border-color: #00A1D0;
}

.tile-account {
    height: 180px;
    border-radius: 8px;    
}

.tileTextStyle{
    text-align: center;
    padding-top:12px;
    white-space: normal;
    word-wrap: noraml;
    height: 46%
}

.landingpageheader {
    font-size: 20px;
    font-style : normal;
    font-weight : 400;
    font-family : Helvetica;
    color: #00A1D0;
}

Answer 1

just try to complete the code in your css

span.tite.tile-account a:hover{ font-weight: bold; }