С помощью чего можно воплотить эту идею? Имеется ввиду CSS, SVG, JPG (фон) становится видимой при наведении курсора на SVG (png) элемент. В данном случае "Лампочка" отдельный html элемент, который является ссылкой. Важный момент - лампочек может быть несколько.
Немножко поиграться с PS и вообще можно карту из таких ховеров сделать. Ну типа большой див position: relative; ,a внутри куча позиционных. А это так пример.
.img a{
display:block;
height:300px;
width:300px;
background-image:url(http://savepic.ru/14038389.png);
}
.img a:hover{
display:block;
cursor:pointer;
height:300px;
width:300px;
background-image:url(http://savepic.ru/14026101.png);
}
<div class="img"><a></a></div>
Запустите в браузере - картинки я не масштабировал, а потому здесь они тупо смотрятся
.all{
display:block;
position:relative;
margin: 10% auto ;
height:50vh;
width:80vw;
border:2px solid red;
}
.img:nth-child(1){
display:inline-block;
position:absolute;
left:50px;
top:20px;
height:200px;
width:200px;
background-image:url(http://htmlbook.ru/example/images/sun1.png);
}
.img:nth-child(1):hover{
cursor:pointer;
background-image:url(http://htmlbook.ru/example/images/sun2.png);
}
.img:nth-child(2){
display:inline-block;
position:absolute;
right:50px;
top:20px;
height:200px;
width:200px;
background-image:url(http://htmlbook.ru/example/images/sun1.png);
}
.img:nth-child(2):hover{
cursor:pointer;
background-image:url(http://htmlbook.ru/example/images/sun2.png);
}
<div class="all">
<div class="img"><a></a></div>
<div class="img"><a></a></div>
</div>
Это можно сделать с помощью box-shadow и Javascript. https://codepen.io/anon/pen/xdQbQB
При просмотре обязательно нажать "На всю страницу" для правильного отображения эффекта освещения.
$(".bulb").hover(function() {
$(this).addClass('active');
$('.light:has(>.active)').addClass('shadow');
$('#outer').addClass('picture');
});
$(".bulb").mouseout(function() {
$('#outer').removeClass('picture');
$('.shadow').removeClass('shadow');
$(this).removeClass('active');
});
#outer, body{
height: 100vh;
background-color: black;
}
#outer, .light {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
.bulb {
height: 50px;
width: 50px;
background-color: yellow;
border-radius: 50%;
z-index: 0;
}
.shadow {
box-shadow: 0 0 0px 2000px black, inset 0 0 120px 120px black;
}
.light {
height: 400px;
width: 400px;
}
.picture {
background: url(https://c402277.ssl.cf1.rackcdn.com/photos/946/images/story_full_width/forests-why-matter_63516847.jpg?1345534028);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="outer">
<div class="light">
<div class="bulb"></div>
</div>
<div class="light">
<div class="bulb"></div>
</div>
<div class="light">
<div class="bulb"></div>
</div>
</div>
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как сделать плавающий сайдбар как на сайте https://wwwcitilink
Тестирую на устройстве с ios 9 и при клике срабатывает стиль hoverКак сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?
Можно ли, одним запросом, получить данные из 3-х таблиц,