hover div показать другой div

Любая идея, как заставить это работать?hover div показать другой div

CSS:

.otherDiv { 
    opacity: 0; 
} 

.innerDiv:hover + .otherDiv { 
    opacity: 1; 
}

HTML

<div id="container"> 

    <div class="outerDiv"> 
    <div class="innerDiv"> 
     <h4>Show content</h4> 
    </div> 
    </div> 

    <div class="otherDiv"> 
    <p>Hello World</p> 
    </div> 

</div>

В основном я хочу otherDiv, чтобы показать только, если вы наведите курсор мыши на innerDiv.

Вот скрипка с моим текущим кодом: http://jsfiddle.net/4ghws6wz/

источник

2015-04-29 Zainab Abounassif

http://jsfiddle.net/4ghws6wz/2/ Здесь вы можете увидеть больше об этом: http://stackoverflow.com/questions/14382149/show-div-when-hover-another-div-using-only -css – sinisake

Используйте jQuery для управления этими типами действий. CSS может выполнять эту работу только в том случае, если вы тщательно разработали надбавку, которая может ограничить макет страницы. –

-1

Вы не можете сделать это с помощью CSS, но

Вы можете попробуйте использовать jQuery, см. скрипку: https://jsfiddle.net/nileshmahaja/4ghws6wz/3/

$(".innerDiv").mouseover(function(){ 
    $(this).parent().siblings().css('opacity', 1); 
}); 
$(".innerDiv").mouseout(function(){ 
    $(this).parent().siblings().css('opacity', 0); 
});

Или

$(".innerDiv").mouseover(function(){ 
    $(".otherDiv").css('opacity', 1); 
}); 
$(".innerDiv").mouseout(function(){ 
    $(".otherDiv").css('opacity', 0); 
});

CSS Selector Документация: http://www.w3.org/TR/css3-selectors/#selectors, http://www.w3.org/TR/CSS2/selector.html#pattern-matching

источник

2015-04-29 20:21:09

это отлично работало и не требует тонны кода, спасибо! –

Попробуйте настроить таргетинг на внешние DIV вместо:

http://jsfiddle.net/4ghws6wz/1/

.otherDiv { 
    opacity: 0; 
} 

.outerDiv:hover + .otherDiv { 
    opacity: 1; 
}

источник

2015-04-29 20:16:24 taxicala

нет способа заставить его работать, используя внутренний div? Потому что я хочу иметь несколько внутренних div, которые изменят фон otherDiv, в зависимости от того, какой внутреннийDiv вы наводите. –

Не нашел дорогу еще. – taxicala

Использование JQuery:

$(document).ready(function(){ 
    $(".innerDiv").hover(function(){ 
     $(".otherDiv").css("opacity", 1); 
    }) 

    $(".innerDiv").mouseleave(function(){ 
     $(".otherDiv").css("opacity", 0); 
    }) 
})

на jsfiddle: http://jsfiddle.net/4ghws6wz/4/

источник

2015-04-29 20:25:07

hover div показать другой div

ответ

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