Эффект наведения изображения не работает над текстом

У меня есть изображение, которое я хочу отобразить как ссылку. У меня есть эффект наведения, когда мышь находится над изображением, но я также хочу наложить текстовую метку на изображение. Проблема в том, что когда мышь над текстом, эффект изображения перестает работать.Эффект наведения изображения не работает над текстом

Мой код ниже. Может ли кто-нибудь предложить, как я могу это исправить?

<html> 

<style> 
    * { 
     -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      -ms-box-sizing: border-box; 
       box-sizing: border-box; 
    } 

    .pic { 
     border: 5px solid #FF0000; 
     float: left; 
     width: 475px; 
     height: 375px; 
     margin: 20px; 
     overflow: hidden; 
     position: relative; 

     -webkit-box-shadow: 5px 5px 5px #C0C0C0; 
       box-shadow: 5px 5px 5px #C0C0C0; 
    } 

    .grow img { 
     width: 475px; 
     height: 375px; 

     -webkit-transition: all 1s ease; 
      -moz-transition: all 1s ease; 
      -o-transition: all 1s ease; 
      -ms-transition: all 1s ease; 
       transition: all 1s ease; 
    } 

    .grow img:hover { 
     width: 570px; 
     height: 450px; 
    } 

    .label { 
     top: 150px; 
      position:absolute; 
      text-align:center; 
      font-size:500%; 
      color: FF0000; 
      width: 100%; 
    } 
</style> 

<a href="MyLink.html"> 
    <div class="grow pic"> 
     <img src="MyImage.jpg" alt="TITLE"> 
     <div class="label">TITLE</div> 
    </div> 
</a>

источник

2015-07-01 Campbell

Вы можете попробовать отключить указатель событие:

.label { pointer-events:none; }

источник

2015-07-01 07:55:29 wickywills

Genius. Отлично работает, спасибо! – Campbell

Примечание: это не работает с IE 10 или ниже – AlexG

Ваших парения только на изображении, применить зависать в дела.

пример:

.grow:hover img { 
    //styles 
}

источник

2015-07-01 07:56:45 AlexG

Также замечательно, спасибо за помощь! – Campbell

Эффект наведения изображения не работает над текстом

ответ

Смежные вопросы