Дисплей CSS div не работает

Я хочу, чтобы div #aboutBlurb появился на #aboutLink:hover. Я использую решетчатую систему Foundation 5.2, если это имеет какое-либо значение. Вот мой код:Дисплей CSS div не работает

<div id="navBar"> 
    <div class="row"> 
    <div class="large-3 medium-3 small-3 columns"> 
    <a href="#about" class="circleLink" id="aboutLink"><span>About</span></a> 
    </div> 
    </div> 
    <div id="aboutBlurb"><h3>blah</h3></div> 
    </div> 



#navBar a.circleLink:hover 
{ 
    background-color: #bc2029; 
    color:white; 
} 
#aboutBlurb 
{ 
    text-align: center; 
    position: absolute; 
    width:100%; 
    font-size: 2em; 
    display:none; 
} 
#navBar #aboutLink:hover + #aboutBlurb 
{ 
    display:block; 
}

Я попытался с помощью ~ и > селекторов, а также не селектор также.

источник

2015-05-27 Tom

'+' и '~' Дон» t работают в направлении родительского элемента. Здесь вы должны использовать JavaScript. – Xufox

Есть ли способ изменить порядок моего кода, чтобы я мог использовать '~' или '+'? Я бы предпочел использовать JavaScript в качестве последнего средства. – Tom

Я не вижу никакой возможности ... CSS-мудрый два элемента просто слишком далеко друг от друга. – Xufox

Я знаю, что вы запросили ответ на CSS, но сделать это с помощью JavaScript довольно просто. Если у вас есть JQuery Installed просто добавьте эту строку:

$("#aboutLink").hover(function() { 
    $('#aboutBlurb').show(); 
});

источник

2015-05-27 21:32:57

Чтобы исправить эту потребность изменить ваш заказ DOM, пожалуйста, проверьте этот

#navBar a.circleLink:hover 
 
{ 
 
    background-color: #bc2029; 
 
    color:white; 
 
} 
 
#aboutBlurb 
 
{ 
 
    text-align: center; 
 
    position: absolute; 
 
    width:80%; 
 
    font-size: 2em; 
 
    color: red; 
 
    display: none; 
 
} 
 
#aboutLink:hover + #aboutBlurb 
 
{ 
 
    display:block; 
 
}

<div id="navBar"> 
 
    <div class="row"> 
 
    <div class="large-3 medium-3 small-3 columns"> 
 
    <a href="#about" class="circleLink" id="aboutLink"><span>About</span></a> 
 
    <div id="aboutBlurb"><h3>blah</h3></div> 
 
    </div> 
 
    </div> 
 
    </div>

источник

2015-05-28 10:21:01

Дисплей CSS div не работает

ответ

Смежные вопросы