HTML CSS текст поверх изображений блокирует перекрестное затухание

#html #css #button #text #overlay

#HTML #css #кнопка #текст #наложение

Вопрос:

это мой первый вопрос здесь. До сих пор мне удавалось найти все свои ответы путем поиска, но не сейчас.

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

Код, который проблематичен:

jsfiddle:http://jsfiddle.net/halfblack/2MCWm/4 /

HTML

 <table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="42">
            <div id="cf">
                <a href="#">
                    <span>Sample text</span>
                    <img class="bottom" src="http://i.imgur.com/ffYHwLW.png" />
                    <img class="top" src="http://i.imgur.com/t3TW5LG.png" />
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td height="42">
            <div id="cf">
                <a href="#">
                    <img class="bottom" src="http://i.imgur.com/ffYHwLW.png" />
                    <img class="top" src="http://i.imgur.com/t3TW5LG.png" />
                </a></div>
        </td>
    </tr>
</table>
  

CSS:

 html, body {height:100%;}

}

#cf {
  position:relative;
  height:42px;
  width:172px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;

}

#cf a {
  text-decoration:none;}

#cf span {
    position: absolute;
    top: 10;
    left: 10;
    font-family: 'Arial';
    font-size: 18px;
    color: #FFFFFF;
    z-index: 2;

}

#cf img.top:hover {
  opacity:0;
}
  

Ответ №1:

Добавление #cf span:hover ~ img.top{opacity:0;} к нему делает свое дело. При наведении курсора мыши на интервал это вызывает то же самое, что и при наведении курсора мыши на сами изображения.

Хотя на ваш вопрос дан ответ, я рекомендую просто использовать фоновые изображения на вашем tds, вместо того, чтобы вставлять несколько изображений снова и снова.

У меня есть для вас эта скрипка, где ваш код очень сильно оптимизирован.

Комментарии:

1. Спасибо, это наведение действительно делает именно то, что я хотел. Проблема с тегами td заключается в том, что плавное затенение, похоже, не работает в Firefox, в то время как оно работает с моим кодом.

2. Затем снова @Halfblack. Бесконечная вставка изображений для затухания не выполняется. Вы могли бы создать div внутри каждого td с фоновыми изображениями. Возможно, вы могли бы оставить tds прозрачным и использовать псевдоэлемент :before, чтобы эти изображения отображались за ними. Если вы хотите, чтобы я помог еще больше, создав скрипку, просто спросите 🙂

3. Я никогда не говорил, что это идеальное решение, только то, что оно рабочее 🙂 Тем не менее, я был бы рад увидеть некоторые другие полезные решения. Я попытался использовать фоновое затухание div на вашей скрипке здесь: jsfiddle.net/32adu/1 но в Firefox эффект тот же — переход происходит мгновенно, без перекрестного затенения.