#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 эффект тот же — переход происходит мгновенно, без перекрестного затенения.