Подскажите как это реализовать

aa.int · July 3, 2011

В общем на сайте http://edinros.samara.ru/ на главной странице посерёдке находится новостной блок, который при выборе заголовка новости слева отображает соответствующую фотографию. Подскажите как такое можно реализовать при помощи HTML и CSS ? Заранее спасибо.

khotabychua · July 3, 2011

Использовать псевдокласс hover и свойство display, самый простейший пример

<div class="cont">
 наведи
 <div>смотри</div>
</div>


 div.cont div {
     display: none;
 }

 div.cont:hover div {
     display: block;
 }

Edited July 3, 2011 by khotabychua

rookie · July 4, 2011

Может все-таки при наведении курсора на заголовок справа? Там это реализовано при помощи js. При помощи :hover это тоже можно сделать, но в IE6 :hover работает только для ссылок.

aa.int · July 4, 2011

Вы немного неправильно меня поняли, вы скинули пример с выпадающими пунктами меню, а мне необходим блок меню, который выводит слева фотографию, когда например наводишь на заголовок "Александр Фетисов". Можете привести пример такой реализации ?

rookie · July 4, 2011

Например, вот так с помощью jQuery:


$('div.target').hover(function() {
 $('img.target').attr('src','img/fetisov.jpg');
}, function() {
 $('img.target').attr('src', 'img/sidorov.jpg');
});

Это очень общий и корявый вариант, но механизм работы отсюда должен быть понятен.

khotabychua · July 4, 2011

Вы немного неправильно меня поняли' date=' вы скинули пример с выпадающими пунктами меню, а мне необходим блок меню, который выводит слева фотографию, когда например наводишь на заголовок "Александр Фетисов". Можете привести пример такой реализации ?[/quote']
Сделайте так - представьте что заголовок "Александр Фетисов" это тот пункт меню, на который нужно навести для появление выпадающего пункта, а фотография справа это и есть сам выпадающий пункт. В общем наверное не особо понятно, но это я веду к тому, что основа у них одинаковая, только расстановка элементов иная. Чуть позже выложу полноценное решение как вы и просили, если этого никто не сделает раньше.

Edited July 4, 2011 by khotabychua

aa.int · July 4, 2011

Ну этот принцип я понял, только надо будет поставить свойство вместо block, inline тогда должно так получится, но выше написали, что IE6 только строки таким способом выводит. А вот с jQuery совсем незнаком..

rookie · July 4, 2011

Ну этот принцип я понял, только надо будет поставить свойство вместо block, inline тогда должно так получится, но выше написали, что IE6 только строки таким способом выводит. А вот с jQuery совсем незнаком..

Во-первых не строки а ссылки. В Internet Explorer по версию 6 включительно, псевдокласс hover поддерживается только для ссылок - подробнее тут.

Ну а если все же делать на css, то принцип такой:


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Blah-blah</title>
<!--[if IE]>
  <script src="js/selectivizr.js"></script>
<![endif]-->
<style>

  .box {
    border: 1px dashed #333;
  }
  .image {
    width: 100px;
    height: 100px;
    background: #c33;
  }
  .box:hover .image {
    background: #369;
  }
</style>
</head>
<body>
  <div class="box">
    <div class="image"></div>
    <p>Blah-blah...</p>
  </div>
</body>
</html>

Для IE добавляем selectivizr который лечит его предвзятое отношение к :hover, а заодно добавляет поддержку таких псевдоклассов как :first/last-child, селекторы атрибутов и многое другое.

Edited July 4, 2011 by rookie

aa.int · July 4, 2011

А где можно достать сам скрипт selectivizr.js ?

rookie · July 4, 2011

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

Int · July 4, 2011

Локальная машина может выступать и в роли сервера. В зависимости от ожидаемой нагрузки это может быть вполне оправдано.

rookie · July 4, 2011

Локальная машина может выступать и в роли сервера. В зависимости от ожидаемой нагрузки это может быть вполне оправдано.

В принципе да. Я не правильно выразился, скрипт будет работать и на локальной машине, но только через localhost.

Int · July 4, 2011

Это называется через веб-сервер

Sign In

Подскажите как это реализовать

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information