Создание интерактивной области в HTML / CSS / JavaScript

0

Поэтому у меня есть этот код, который я создал с некоторой помощью:

Я не понимаю, как вводить код, который он создавал, все в одной строке при форматировании выглядело нечитаемым, поэтому вот ссылка:

http://jsfiddle.net/QFF4x/

<div style="border:1px solid black;" onmouseover="change(this)" onmouseout="restore(this)" ></div>

В любом случае, когда мышь находится над черной линией, она расширяется вниз. Как я могу сделать область onomouseover более крупной?

Например, если мышь наводится до 15 пикселей под линией, линия будет расширяться. как я могу это сделать?

* Примечание: я все должен быть в HTML, встроенное кодирование только я не могу связать какие-либо страницы JS или CSS.

  • 0
    Я не понимаю, что именно вы пытаетесь достичь?
  • 1
    Примечание: все должно быть в HTML, только встроенное кодирование, я не могу связать никакие страницы JS или CSS. - Тьфу ... почему?
Показать ещё 2 комментария
Теги:

5 ответов

0
Лучший ответ

heres решение с использованием оберточного div с дополнением: -15px и в его событиях наведения, просто используйте firstElemntChild

<script>
    function change (element) {
        element.firstElementChild.style.border = "3px solid black";
    }
    function restore(element) {
        element.firstElementChild.style.border = "1px solid black";
    }
</script>

<div style="padding-bottom:15px;" onmouseout="restore(this)" onmouseover="change(this)" >

    <div style="border:1px solid black;"  >

    </div>

</div>

так что вы можете навешивать 15 px под границей, а граница меняет и восстанавливает

скрипка. http://jsfiddle.net/QFF4x/2/

Поделиться
  • 0
    Потрясающие!!! Огромное спасибо!
  • 0
    @ Бодох, пожалуйста, нет! Не используйте встроенные JS! Пожалуйста, прочитайте мой ответ еще раз.
Показать ещё 5 комментариев
1

По какой-то причине я получаю жалобы на "внешние файлы", которые не имеют отношения к делу, поэтому я обновляюсь, чтобы уточнить, что все это может быть в одном документе: демо-версия (нажмите).

<style>
#outer {
  padding-bottom: 15px;
}

#inner {
  border: 1px solid black;
}

#inner.big {
  border-width: 3px;
}
</style>

<div id="outer">
  <div id="inner"></div>
</div>

<script>

var outer = document.getElementById('outer');

var inner = document.getElementById('inner');

outer.addEventListener('mouseenter', function() {
  inner.className = 'big';
});

outer.addEventListener('mouseleave', function() {
  inner.className = '';
});

</script>

Для этого вам не нужен JavaScript. Вот только пример css: Демо-версия Live (нажмите).

  <div class="outer">
    <div class="inner"></div>
  </div>

CSS:

.outer {
  padding-bottom: 15px;
}

.inner {
  border: 1px solid black;
}

.outer:hover > .inner {
  border-width: 3px;
}

Вместо использования JavaScript я использую CSS :hover. Трюк здесь заключается в том, чтобы обернуть элемент в другой элемент и нанести на него внешний элемент, чтобы вы могли навести курсор на это дополнение, чтобы воздействовать на внутренний элемент.

Если вы хотите использовать JavaScript, пожалуйста, игнорировать любые ответы здесь, используя встроенные JS (что там, где вы ссылаетесь яваскрипт функций в HTML.). Вот базовый пример того, как это сделать без встроенных js и сохранения ваших стилей в css: Live demo (нажмите).

  <div id="outer">
    <div id="inner"></div>
  </div>

CSS:

#outer {
  padding-bottom: 15px;
}

#inner {
  border: 1px solid black;
}

#inner.big {
  border-width: 3px;
}

JavaScript:

var outer = document.getElementById('outer');

var inner = document.getElementById('inner');

outer.addEventListener('mouseenter', function() {
  inner.className = 'big';
});

outer.addEventListener('mouseleave', function() {
  inner.className = '';
});

Почему это вместо inline js? Прочтите эти результаты - их много! https://www.google.com/search?q=Why+is+inline+js+bad%3F

Поделиться
  • 0
    Он не может использовать внешние таблицы стилей.
  • 0
    Да, это было бы намного проще в CSS, но я написал в вопросе, что я не могу использовать внешнюю страницу CSS или JS, это должен быть встроенный CSS, и я не знаю, как добавить функцию наведения во встроенный HTML.
Показать ещё 6 комментариев
0

Вы можете поместить div в более крупный div и установить событие onclick на более крупном div.

<div onmouseover="change(this.childNodes[0])" onmouseout="restore(this.childNodes[0])">
    <div style="border:1px solid black;" ></div>
</div>
Поделиться
0

Чтобы увеличить границу при изменении наведения

element.style.border = "3px solid black";

Для 15px

element.style.border = "15px solid black";
Поделиться
0

это решение.

<div style="border:1px solid black;" onmouseover="javascript:this.style.border = '8px solid black';" onmouseout="javascript:this.style.border = '1px solid black';" ></div>

http://jsfiddle.net/5GAUq/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню