Чтобы навести курсор мыши на ссылку, я хочу, чтобы div, содержащий ссылку и другое содержимое, увеличивался в высоте, а затем уменьшал его до 19 пикселей при наведении мыши.

Question

Я настраиваю программное обеспечение форума

• каждая страница имеет 20 тем
• каждая нить содержится внутри элемента div, чья class="threadpreview"
• внутри каждого div "threadpreview" - это ССЫЛКИ на полный поток и предварительный просмотр 500-символьного потока прямо под ссылкой
• когда страница загружается, у меня высота всех div'ов установлена ​​на 19px и переполнение: скрыто, так что предварительный просмотр потока скрыт, и вы можете видеть только ССЫЛКУ, чтобы дивы выглядели «свернутыми»
• когда пользователь наводит указатель мыши на ССЫЛКУ для этого потока, div threadpreview должен «развернуть» его исходную высоту, чтобы отобразить содержимое, а при выводе его следует откатиться до 19 пикселей, чтобы скрыть содержимое.

(я не использую jQuery)

РЕДАКТИРОВАТЬ: Если jQuery может сделать это легко, я сделаю это

Answer 1

Нечто подобное должно указывать вам правильное направление:

function init() {
    var lDivs = document.getElementsByTagName("div");
    for(var i = lDivs.length; i--;) {
        if(lDivs[i].className == "threadpreview") {
            lDivs[i].onmouseover = function() { this.style.height = ""; } // probably better to also use lDivs[i].addEventListener("mouseover", ..., false);
            lDivs[i].onmouseout = function() { this.style.height = "19px"; }
        }
    }
}

window.addEventListener("load", init, false); // or window.attachEvent for IE, or window.onload = ...

Вам придется использовать соответствующую функцию прикрепления к событию (или переключаться между ними ).