Нужна помощь с CSS3

#css

Вопрос:

Хорошо, вот html и css3

 <div id="sitename">
    <div class="logo">
    <a class="home" href="#"><img src="logo.png" /></a>
    </div>
    <span class="someclass"><a class="home" href="#">Home</a></span>
    <span class="recharger">Some text</span>
    <span class="reload">Some other text</span>
</div>

.reload {
    position: absolute;
    top: 70px;
    left: 181px;
    width: 140px;
    -webkit-transition: opacity;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: opacity;
    -moz-transition-duration: 400ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: opacity;
    -o-transition-duration: 400ms;
    -o-timing-function: ease-out;
    transition: opacity;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    opacity: 0;
    filter:alpha(opacity=0);
}
??? {
    opacity: 1 !important;
    filter:alpha(opacity=100) !important;
}

Я хочу, чтобы текст в .reload отображался при наведении курсора мыши на .home (в 2 местах). Что я должен заменить??? с помощью?

Спасибо

Ответ №1:

В CSS элементы должны быть вложенными, например:

 <a class="home" ...><span class="reload">...</span></a>

Тогда вы можете использовать какой-нибудь CSS, подобный этому:

 a.home:hover .reload { opacity: 1 !important; ... }

В противном случае вам придется использовать JavaScript, чтобы разобраться с этим. Вы можете легко сделать это в jQuery:

 $('a.home').hover(function () {
  $('.reload').css('opacity',1);
  $('.reload').css('filter','alpha(opacity=100)');
});

1. Несколько незначительных замечаний: .css() может обрабатывать несколько изменений свойств $('.reload').css({'opacity':1,'filter':'alpha(opacity=100)'); , и они не обязательно должны быть вложены просто наравне друг с другом 😉

Ответ №2:

Наиболее близким к тому, что вы хотите, является общий комбинатор родственных элементов ~ , но элементы ( .home и .reload ) должны находиться на одном уровне гнезда

итак, если ваш html был

 <div id="sitename">
    <a class="logo home" href="#"><img src="logo.png" /></a>
    <a class="someclass home" href="#">Home</a>
    <span class="recharger">Some text</span>
    <span class="reload">Some other text</span>
</div>

подходящий css был бы

 .home:hover ~ .reload{
    opacity: 1 !important;
    filter:alpha(opacity=100) !important;
}

цитирую общий одноуровневый селектор ^{ссылки на MDC}

~ Комбинатор разделяет два селектора и сопоставляет второй элемент, только если ему предшествует первый, и оба имеют общего родителя.