Текст и изображение выделены то же время

Question

Я пытаюсь сделать меню.

http://jsfiddle.net/yagogonzalez/pVcQG/

Я хочу, чтобы изображение и текст, выделенный в то же время. Когда мышь над изображением, текст выделяется, но когда мышь над текстом, изображение не изменяется.

Кстати, я не могу удалить границу изображения с помощью border-style: none;.

Я надеюсь, что кто-нибудь может мне помочь. Большое спасибо!

<div class="iniciocenter"> 
    <div class="bloqueinicio"> 
     <a href="?page_id=7"> 
      <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">nosotros 
     </a> 
    </div> 
    <div class="bloqueinicio"> 
     <a href="?page_id=8"> 
      <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');">cuentos 
     </a> 
    </div> 
</div> 

Стиль

.iniciocenter { 
    text-align: center; 
} 
.imghover2 { 
    width:190px; 
    height:190px; 
} 
.imghover2:hover { 
    background-position:0px -190px; 
} 
.handlee{ 
    font-family: handlee; 
    font-size: 24px; 
    font-size: 1.714rem; 
    line-height: 1.285714286; 
    margin-bottom: 14px; 
    margin-bottom: 1rem; 
} 
.bloqueinicio { 
    display:inline-block; 
    text-align: center; 
    font-family: handlee; 
    font-size: 22px; 
    font-size: 1.971rem; 
    color: #365F8B; 
    width:190px; 
    height:50px; 
} 
.bloqueinicio a { 
    text-decoration: none; 
    color: #375F8F; 
} 
.bloqueinicio a:hover { 
    color: #FF8000; 
} 

Answer 1

Добавьте ниже в CSS, чтобы получить изображение подсвечивается на парящий текст.

.bloqueinicio a:hover .imghover2{ 
    background-position:0px -190px; 
} 

Demo Fiddle

EDIT: появляется граница, когда img тег используется без атрибута src (как вид заполнителя для изображения). Здесь вы помещаете изображение в качестве фона. Следовательно, моим предложением было бы использовать пустой тег div вместо тега img, как показано ниже, чтобы покончить с этой границей.

<div class="bloqueinicio"> 
    <a href="?page_id=7"> 
     <div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');"> 
     </div> 
     nosotros 
    </a> 
</div> 

Demo Fiddle 2

Дополнительная информация: Вы можете посмотреть на this SO thread также перед реализации предложения, упомянутые в редактировании. В основном это говорит в соответствии с HTML 4.01, элементы уровня блока не допускаются внутри <a>. Но с HTML5 это совершенно верно.

Answer 2

Измените правила Hover так:

.bloqueinicio:hover .imghover2 { 
background-position:0px -190px; 
} 

... 

.bloqueinicio:hover a { 
color: #FF8000; 
} 

Смотрите следующую скрипку: http://jsfiddle.net/H7DFA/

Answer 3

редактировать .imghover2:hover класс вроде этого:

.bloqueinicio a:hover img { 
    background-position:0px -190px; 
} 

http://jsfiddle.net/mohsen4887/pVcQG/5/