Всплывающее окно по id
Подскажите пожалуйста, есть область - это path в svg, их несколько разных, для каждой есть всплывающее окно, но как при наведении прописать, что бы для области открывалось конкретное окно (по уникальному id например), а другое окно, открытое до этого из другой области закрывалось (окна сделаны div).
|
NeonMan,
сделайте минимальный макет |
Поступил таким образом:
$('.country').hover (
function() {
$('.country-popup').hide();
$('.country').css('opacity','0');
$(this).css('opacity','1');
var activeCountry = $(this).attr('href');
$(activeCountry).show();
});
Прописал href в path для id каждого из окон, но правильно ли в path прописывать href, может есть какой-то еще способ для такой ситуации, было бы интересно взглянуть |
NeonMan,
... ждите телепатов |
))
вот карта с областями, о которой я писал выше, сделал попапы поведение, код который написал, но есть может какой-то еще способ, ради проф интереса, а то мне кажется прописывать href="" в path svg файла не очень корректно |
NeonMan,
можно по индексу тогда никаких id не надо совсем |
NeonMan,
$(function() {
var country = $(".country"),
popup = $(".country-popup"),
btn = $(".country-popup-btn");
function hide() {
popup.hide();
country.css("opacity", "0")
}
country.hover(function() {
hide();
$(this).css("opacity", "1");
var activeCountry = country.index(this);
popup.eq(activeCountry).show()
});
btn.click(function(event) {
event.preventDefault();
hide()
})
});
|
Интересная конструкция, спасибо
|
Подскажите такой момент, есть такая структура
$('#kazan').mouseenter (
function() {
$('.menu-kazan').css('background', '#CEF5FC');
});
$('#kazan').mouseout (
function() {
$('.menu-kazan').css('background', 'none');
});
Это при наведении на один элемент, подсвечивается другой, и когда курсор уходит с элемента, тому присваивается значение background: none, но потом когда уже навожу непосредсвенно на .menu-kazan больше не срабатывает .menu-kazan:hover {background: цвет} из css. Может есть какой-то другой способ в jquery сделать такую операцию? |
NeonMan,
цвет нужен - лучше цвет и менять. Цитата:
|
понял, спасибо
|
NeonMan,
Пример: hover вариант 1
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div.hot{
width: 100px;
height: 100px;
border: 1px dashed Gray;
padding: 5px;
}
.Red{
background-color: Red;
}
.menu-kazan:hover{
background-color: #CEF5FC;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="hot Red" id="kazan">kazan</div>
<div class="hot menu-kazan">menu-kazan</div>
<script>
$('#kazan').on('mouseenter mouseleave', function(event) {
var color = event.type == 'mouseenter' ? '#CEF5FC' : '';
$('.menu-kazan').css('backgroundColor', color);
});
</script>
</body>
</html>
Пример: hover вариант 2
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div.hot{
width: 100px;
height: 100px;
border: 1px dashed Gray;
padding: 5px;
}
.Red{
background-color: Red;
}
.menu-kazan:hover, .menu-kazan.hover{
background-color: #CEF5FC;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="hot Red" id="kazan">kazan</div>
<div class="hot menu-kazan">menu-kazan</div>
<script>
$('#kazan').on('mouseenter mouseleave', function(event) {
$('.menu-kazan').toggleClass('hover', event.type == 'mouseenter')
});
</script>
</body>
</html>
|
а что происходит, когда "?" в коде, да ли? что он спрашивает, не if же(спасибо за варианты, попробовал)
|
NeonMan,
Оператор вопросительный знак „?“ |
| Часовой пояс GMT +3, время: 20:47. |