Помогите разобраться с Hover

Тема в разделе "Верстка", создана пользователем web-in, 19 окт 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. web-in

    web-in Постоялец

    Регистр.:
    13 окт 2010
    Сообщения:
    74
    Симпатии:
    7
    Всем привет, возникла трудность подскажите как можно ёё исправить.
    Проблема вот такая: при на ведении на картинку (на которой сверху наложен фон z-index:1) фон пропадает, и также на картинке имеется текст а при наведении на текст фон снова появляется.
    Подскажите как можно сделать чтобы фон не появлялся при наведении на текст.

    css
    Код:
    .articles-top-hits {
    float:left;
    margin:2px;
    width:49.3775%;
    position:relative;
    display:block;
    }
    .articles-top-hits .bg {
    background: url("../images/post_pr_bg.png") repeat-x scroll 0 -40px transparent;
    bottom: 0;
    height: 160px;
    left: 0;
    position: absolute;
    width: 316px;
    opacity:0.66;
    z-index:1;
    }
    .articles-top-hits img {display:block;}
    .articles-top-hits h5 {
    max-width:80%;
    padding:0;
    left:20px;
    position:absolute;
    font:italic bold 18px/18px Georgia;
    text-shadow: 0 1px 2px black;
    bottom:20px;
    z-index:2;
    }
    .articles-top-hits h5 a {
    text-decoration:none;
    border:none;
    color:#fff;
    }
    .articles-top-hits p {display:none;}
     
     
    /**** HOVER ****/
    .articles-top-hits .bg:hover {opacity: 0;
    -moz-transition-duration: 0.5s;
    -moz-transition-property: opacity;}
    html
    HTML:
    
    <div class="articles-top-hits">
        <h5><a href="/">Текст</h5>
        <span class="bg"></span>
        <img  src="95f2060b560b122a351dc419b9c8a2ec38.jpg">
    </div>
    Заранее спасибо!
     
  2. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    776
    Симпатии:
    230
    Задайте для
    .h5 z-index: 1
    а остальные z-index: увеличьте на 1
     
  3. web-in

    web-in Постоялец

    Регистр.:
    13 окт 2010
    Сообщения:
    74
    Симпатии:
    7
    В таком случае по логике вещей все в норме, но тогда текст будет принимать часть фона (т.е. будет серый как ".articles-top-hits .bg")

    К сожалению до сих по ничего не получилось возможно кто нибудь сможет подсказать.
    Код здесь http://jsfiddle.net/WxX9E/

    Добавлено zek24: дабл-постинг! есть кнопка редактировать
     
  4. BaNru

    BaNru Постоялец

    Регистр.:
    20 ноя 2008
    Сообщения:
    126
    Симпатии:
    52
    Код:
    .articles-top-hits .bg:hover, h5:hover + .bg {
      opacity: 0;
      -moz-transition-duration: 0.5s;
      -moz-transition-property: opacity;
    }
    http://jsfiddle.net/WxX9E/1/
     
    web-in нравится это.