1

Здравствуйте. Подскажите как решить такую задачку. Нужно чтобы при наведении на картинку-ссылку в нужном блоке div появлялась информация по которой также можно кликать и т.д. Проблем реализовать появление при наведении нет, но проблема в том, что ссылки-картинки расположены в 2 ряда и если навести на картинку из нижнего ряда, то информация появившаяся для этого блока (а появляется она в div над всеми картинками-ссылками) пока будешь вести мышку до нее может исчезнуть так как легко зацепить другую ссылку-картинку. Сайт тут Там где сейчас написан Оригинальные запчасти и должна появляться инфа, а ссылки картинки - под ней.

    Вот такая реализация у меня, как переписать с учетом проблем описанных выше: 
http://jsfiddle.net/werty1001/ysjptcus/

UPD1: Почему хочется именно при наведении? Потому что при клике хочется вывести модальное окно с формой. Также при клике в появившемся блоке будет так же выходить модальное окно с формой. Поэтому и хочется сделать появление при наведении, если возможно.

РЕШЕНИЕ:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by werty1001</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type='text/css'>
  a{color:#00F;border-bottom:dotted 1px blue;margin:0 10px}
  a:hover{color:#333;border:#333;cursor:pointer}
  .help{width:100px;height:100px;display:inline-block;background:#eee;padding:20px;margin:0 10px;opacity:0}
  .help.active{opacity:1}
  </style>
<script type='text/javascript'>
$(window).load(function() {
    var id, pause = 300;
    $("body").on("mouseenter", "[data-help]", function(b) {
        id = $(this).data("help");
        this.pause = pause;
        $(this).stop(!0).animate({
            pause: 0
        }, pause, function() {
            id == $(this).data("help") && ($(".help").removeClass("active"), $(id).addClass("active"))
        })
    }).on("mouseleave", "[data-help]", function(b) {
        id = null
    })
});
</script>
</head>
<body>
<a data-help="#log1">Ссылка №1</a>
<a data-help="#log2">Ссылка №2</a> <br /><br />
<div id="log1" class="help">Блок 1</div>
<div id="log2" class="help">Блок 2</div>
</body>
</html>
1
  • Возможно в данном случае делать не по hover, а по клику
    – naneutral
    1 июл 2015 в 6:48

2 ответа 2

1

Сделать hover не только для ссылки, но и для блока, который показывается при наведении на ссылку. И при помощи css-анимации дать достаточно времени, чтобы довести мышку до блока (т. е. сделать задержку исчезновения).

1
  • Думал над этим, а зачем hover блоку который показываться будет? И в таком случае как отловить событие, что пользователь реально хочет показать другой блок - навел на другой пункт специально? Получается проще все реализовать через событие click?
    – Batyabest
    1 июл 2015 в 6:49
0

.image-title{
  width:250px;
  height:180px;
  overflow:hidden;
  border:1px solid #f9f9f9;
}
.image-title:hover .title{
  top:-180px;
}
.image-title img{
  max-width:250px;
  min-width:250px;
  height:200px;
}
.title{
 width:250px;
 height:200px;
 background:rgba(100,110,120,.5);
 position:relative;
}
.title p{
 text-align:justify;
 color:#fff;
 padding:5px 10px;
 font-size:16px;
 font-family:sans-serif;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
   <div class="image-title"> 
      <img src="http://st2-fashiony.ru/pic/battle/pic/87130/3.jpg" alt="pic" />
	  <div class="title">
	    <p>
		 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
		</p>
	  </div>
   </div>
</body>
</html>

вот так ?

3
  • Вы сам сайт смотрели?
    – Batyabest
    30 июн 2015 в 19:21
  • сейчас посмотрел -- и что там ? просто фоты и всё , в общем я понял что не так ?
    – user33274
    1 июл 2015 в 10:14
  • Причём тут появление блока на этой картинке? Блок должен появляться там где сейчас написано оригинальные запчасти. А наведение на блоки с картинками под ней.
    – Batyabest
    1 июл 2015 в 12:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.