CSS - почему нет: hover parent скрыть дочерние элементы - PullRequest
Новая
       30

CSS - почему нет: hover parent скрыть дочерние элементы

1 голос
/ 18 августа 2011

У меня есть панель навигации с изображениями, вот так: 

<ul>
  <li class="me">
    <span class="cont"><img src="dummy.png" /></span>
  </li>
  <li class="me">
    <span class="cont"><img src="dummy.png" /></span>
  </li>
</ul>

При наведении курсора на элемент списка я хочу изменить цвет фона, чтобы охватить область и изображение, например: 

.me {background-color: none;}
.me:hover {background-color: rgba(150,150,150,0.5);}

Проблема в том, что изображение не покрывается ... Это потому, что фон на самом деле ... "фон", на котором сидят дочерние элементы? Если это так, как я могу добиться этого эффекта с простым CSS?

РЕДАКТИРОВАТЬ - решение

это работало с моей исходной структурой HTML: 

<ul>
  <li>
   <a href="" class="ui-btn">
     <span class="ui-btn-inner"> /* CONTAINS IMAGE AS BACKGROUND */
        <span class="ui-btn-text">text</span>  /* GETS BACKGROUND */
        <span class="ui-icon"></span>
     </span>
   </a>
 </li>
</ul>

«Негативная логика»: если я назначаю фон для элемента списка, он располагается за всеми дочерними элементами, поэтому я решил, что нужно назначить фон элементу, который является дочерним элементом элемента, содержащего img, чтобы он появился выше всех предметов. span ui-btn-inner содержит изображение, поэтому установка фона: hover для span ui-btn-text делает его отображаемым над изображением ... странно, но работает.

Ответы [ 3 ]

1 голос
/ 18 августа 2011

Да, фон - это просто фон, он расположен за любыми дочерними элементами.

Чтобы достичь того, что вы ищете, попробуйте использовать псевдоэлемент css :after, чтобы замаскировать изображение при наведении курсора.: 

.me {
    position: relative;  
}

.me:hover:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(150,150,150,0.5);
}

Он блестящий, вы можете использовать изображение как семантическое изображение и не требует дополнительной разметки HTML.

0 голосов
/ 18 августа 2011

другой потенциальный вариант, который должен быть более кроссбраузерным, чем: after может быть: 

.me:hover span { display: hidden; }
0 голосов
/ 18 августа 2011

Да, это потому, что фон на самом деле является фоном. Лучший способ добиться этого в raw css - продолжить использовать фон: 

.me
{
    background-color: none;
    background-image: url(dummy.png);
    background-repeat: no-repeat;
}
.me:hover
{
    background-color: rgba(150,150,150,0.5);
    background-image: ;
}

Вы также можете добиться этого эффекта с помощью небольшого количества JavaScript. 

<ul>
  <li class="me">
    <span class="cont"><img="dummy.png" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";'></span>
  </li>
  <li class="me">
    <span class="cont"><img="dummy.png"" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";></span>
  </li>
</ul>

Код не проверен. Для правильной настройки может потребоваться настройка.

Редактировать: Концепция наложения
Ни один из этих псевдокодов не является тестовым, но я делал это раньше, поэтому может потребоваться небольшая настройка. У меня нет копии оригинала, которую я сделал, поэтому мне придется ее использовать. Первым шагом является создание относительного контейнера и 2 вспомогательных контейнеров. 

.meContainer
{
    position: relative;
    width: 100px;
    height: 30px;   /* I usually specify height/width for these things */
}

.meContainerLink
{
    position: absolute;
    top: 0;
    left: 0;        /* You need to use position to get them to overlap */
    z-index: 1;     /* Provide a layer */
}

.meContainerAlpha
{
    position: absolute;
    top: -30px;     /* Move it UP 30px */
    left: 0px;
    z-index: 2;     /* Place it on top of the other layer */
    display: none;  /* Hide it */
    background-color: rgba(150,150,150,0.5);   
}

.meContainerAlpha:hover
{
    display: inline; /* Show it */
}

Тогда вам нужно поместить их в div внутри вашего <li>. 

<ul>
  <li class="me">
    <div class="meContainer">
        <div class="meContainerLink">
            <img="dummy.png">
        </div>
        <div class="meContainerAlpha">
            &nbsp;
        </div>
    </div>
  </li>
  <li class="me">
    <div class="meContainer">
        <div class="meContainerLink">
            <img="dummy.png">
        </div>
        <div class="meContainerAlpha">
            &nbsp;
        </div>
    </div>
  </li>
</ul>

Я не помню, чтобы когда-либо пробовал этот метод внутри встроенных тегов <li>, так что поначалу он может вести себя странно. Возможно, вам придется отказаться от <li> и полностью перейти на другую структуру <div>.

...