Поэтому у меня есть этот код, который я создал с некоторой помощью:
Я не понимаю, как вводить код, который он создавал, все в одной строке при форматировании выглядело нечитаемым, поэтому вот ссылка:
<div style="border:1px solid black;" onmouseover="change(this)" onmouseout="restore(this)" ></div>
В любом случае, когда мышь находится над черной линией, она расширяется вниз. Как я могу сделать область onomouseover более крупной?
Например, если мышь наводится до 15 пикселей под линией, линия будет расширяться. как я могу это сделать?
* Примечание: я все должен быть в HTML, встроенное кодирование только я не могу связать какие-либо страницы JS или CSS.
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/
По какой-то причине я получаю жалобы на "внешние файлы", которые не имеют отношения к делу, поэтому я обновляюсь, чтобы уточнить, что все это может быть в одном документе: демо-версия (нажмите).
<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
Вы можете поместить div в более крупный div и установить событие onclick на более крупном div.
<div onmouseover="change(this.childNodes[0])" onmouseout="restore(this.childNodes[0])">
<div style="border:1px solid black;" ></div>
</div>
Чтобы увеличить границу при изменении наведения
element.style.border = "3px solid black";
Для 15px
element.style.border = "15px solid black";
это решение.
<div style="border:1px solid black;" onmouseover="javascript:this.style.border = '8px solid black';" onmouseout="javascript:this.style.border = '1px solid black';" ></div>