простой неблокированный метод для применения div в качестве наведения мыши на 100% ширину

Question

Название в значительной степени говорит само за себя. Есть множество сценариев, которые делают это, но большинство из них настолько раздуты и в итоге портят сценарий, и просто используют информацию из тегов alt. Мой сценарий выглядит следующим образом:

<ul>
     <li style="display:block">
           <img src="images/portfolio/talktostrangers/1.jpg" />
                <div class="caption">
                <span class="projecttitle">Talk to Strangers</span>A social awareness campaign that proposes people talk to strangers on trains, subways, elevators, & the like.
                </div>
     </li>
</ul>

Предварительный просмотр можно посмотреть здесь, чтобы получить представление о том, куда он пойдет: http://www.studioimbrue.com/beta

Answer 1

Если я правильно понимаю, вы просто хотите, чтобы заголовок показывался при наведении курсора на изображение. Лучший способ сделать это с помощью JavaScript. Я рекомендую использовать js Framework, например jQuery, что делает его действительно простым. Вы можете просто включить исходный код jQuery и поместить его в тег сценария или внешний файл в заголовке документа.

$(document).ready(function(){
    $('li img').hover(function(){
       $(this).siblings('div.caption').fadeIn('slow');
    }, function(){
       $(this).siblings('div.caption').fadeOut('slow');
    });
});

Тогда все дело в стилях CSS, непрозрачности, цвете фона, цвете текста. Вам решать.

Относительно ширины 100% в заголовке вашего вопроса, поскольку он находится в теге DIV, он должен автоматически заполнить 100% своего родителя, LI.