Изображение наведите курсор не будет

Question

У меня есть изображение в центре экрана, на котором мне нужна рамка, которая при наведении курсора на цвет меняется. Я пытаюсь сделать это, как вы можете видеть в коде ниже, но проблема в том, что изображение просто остается ссылкой, но без границы, что не так?

HTML код:

<div id="container"> 

    <div id="content"> 

     <div class="10Img"> 
      <a href=""><img src="10Pimg.png" alt="10img" style="width:900px; height:200px"></a> 
     </div> 

    </div> 


    </div> 

CSS код:

#content{ 
    padding-bottom: 200px; 
    position: absolute; 
    float: left; 
    left: 50%; 
    margin-left: -450px; 
    top: 200px; 
} 

#container{ 
    height:100%; 
} 

.10Img{ 
    border: 2px solid grey; 
} 

.10Img a:hover{ 
    outline: 2px solid black; 
} 

Answer 1

Основная проблема заключается в том, что вы начинаете свое имя класса с изменения числового знака 10Img и начинаете его с буквенного символа. Пример. я изменить его с 10Img на aImg

Затем вы можете использовать

.aImg img { 
border: 2px solid grey; 
} 

или только

.aImg { 
    border: 2px solid grey; 
    } 

Answer 2

Попробуйте это: Demo

a img { 
    border: 2px solid grey; 
} 
a img:hover { 
    border: 2px solid black; 
} 

Answer 3

Ваш CSS класс 10Img не работает, потому что имена классов CSS не должно начинаться с онемения эр, см:

Which characters are valid in CSS class names/selectors?

Так что, если вы называете класс Img10 вместо 10Img он должен работать.

<div id="container"> 
    <div id="content"> 
     <div class="Img10"> 
      <a href=""><img src="http://dummyimage.com/900x200/000/fff" alt="10img" style="width:900px; height:200px" /></a> 
     </div> 
    </div> 
</div> 

Кроме того, вы можете иметь :hover границу на div вместо этого на a:

#content{ 
    padding-bottom: 200px; 
    position: absolute; 
    float: left; 
    left: 50%; 
    margin-left: -450px; 
    top: 200px; 
} 

#container{ 
    height:100%; 
} 

.Img10{ 
    border: 2px solid grey; 
} 

.Img10:hover{ 
    outline: 2px solid black; 
} 

Вот рабочая скрипку: http://jsfiddle.net/k2Ld7yfe/

Answer 4

See Этот Demo

.Img{border: 2px solid grey;} 
.Img a:hover{ 
outline: 2px solid black;} 

Примечание: Имя класса не может начинаться с целого числа.

См. This для Правил относительно именования.