Django + Javascript + "onmouseover" - PullRequest
Новая
       13

Django + Javascript + "onmouseover"

2 голосов
/ 21 февраля 2011

Это будет своего рода общий вопрос о django + javascript.Например, у меня есть 5 новостей, для каждого есть заголовок, текст и изображение.На веб-странице видны все 5 изображений, но только 1 текст и 1 заголовок (для самых последних новостей).

Теперь я хочу сделать следующее: когда курсор мыши помещается над любым изображением новостей, его заголовок и текст будут отображаться вместо заголовка и текста последних новостей.Как это сделать?Я не ищу полное решение (это было бы слишком красиво :), но некоторые советы, где искать.

Я предполагаю, что необходим Javascript (а web был написан на django), но что еще?Кто-нибудь может дать мне несколько советов, как ссылки и т. Д.?Буду очень признателен.

1 Ответ

0 голосов
/ 21 февраля 2011

Если вы сгенерируете 4 других новостных элемента в div или каком-либо другом элементе, вы можете применить к нему стиль класса display: none, который будет скрывать этот фрагмент контента.Затем вы можете использовать некоторый jQuery (или простой старый javascript, если хотите), чтобы показывать этот контент при наведении мыши.

Примерно так: 

$('img').mouseover(function(){
    var item_num = $(this).data('news-item');
    $('hidden' + item_num).show();
});

Это предполагает, что у вас есть что-то вроде HTML:

<img src='' data-news-item='2'>
<div class='hidden2'> 
    <span id='title2'> Hi There </span> 
    <span id='text2'> ..article.. </span>
</div>

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

...