рони,
Deff,
Большое спасибо за помощь!
Так как я плохо знаю js мне сразу трудно оценить примеры предложеные
рони, а вот из примера
Deff я удалил строки
<br>
Какой-то текст <br>
И еще<br>
<br>
подведя тем самым вплотную нижний независимый div под верхний. Но в этом случае, когда переводишь курсор с верхнего дива на нижний, то последний исчезает.
Чтобы было понятней для чего это необходимо приведу ссылку на свой тестовый сайт:
http://xarod.tk/shop/
Здесь, в строке меню, слева-направо три корзины:
первая - созданная платным плагином WooCommerce WooCart Pro, вторая - созданная бесплатным плагином WooCommerce Menu Cart и третья - штатная, входящая в состав темы Store Front.
Еще справа, кодом в header.php:
<div class="widg">
<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
</div>
вставлен виджет корзины.
Если ниже раза три нажать под тестовым товаром кнопки "Добавить в корзину", то корзины наполнятся тестовым товаром. Если подвести курсор к первой и третьей корзине то ниже появится виджет корзины.
Во второй бесплатной корзине этого показа нет. Поэтому возникла необходимость связать эту корзину с тем виджетом, что справа в хеадере.
То-есть, с помощью css, переместить виджет под корзину, скрыть, а затем скриптом сделать его появление при наведении.
Вот смотрю через Firebug на первую корзину. образованную WooCommerce WooCart Pro. В html коде его div, со всплывающим виджетом, разнесён от верхнего дива очень далеко. однозначно не вплотную и не связан родительским дивом с верхним, однако чётко работает.
рони, по вашей ссылке меню должным образом не работает:
меню как на сайте утконос
------------------
Немного упростил-переделал код код от
Deff:
https://jsfiddle.net/mbg4gqe6/
Теперь второй див появляется при наведении на первый, но исчезает, когда выйдешь из второго. Однако не исчезает, когда выходишь из первого. Как сделать чтобы появлялся от первого, а исчезал при выходе из любого - не знаю.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".asd").mouseenter(function(){
$(".hide").css("display","block");
});
$(".hide").mouseleave(function(){
$(".hide").css("display","none");
});
});
</script>
<style>
.hide {display:none; width:165px;}
.asd {
border:dotted 1px rgba(0,0,0,.5); width:140px;
}
</style>
</head>
<div class="asd"><span style="color:blue">Описание</span>(спойлер)</div>
<div id="id321" class="hide">
<span style="color:red">А вот Мы и открылись!</span>
</div>
</body>
</html>