javascript - 在 HTML/CSS/JavaScript 中创建可点击区域

Question

所以我有这段代码是我在一些帮助下创建的:

我不明白如何输入代码，它一直在一行中创建所有内容，格式看起来不可读，所以这是一个链接:

http://jsfiddle.net/QFF4x/

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

无论哪种方式，当鼠标悬停在黑线上时，它都会向下扩展。我怎样才能使 onomouseover 区域更大？

例如，如果鼠标悬停在该行下方最多 15 个像素处，该行将展开。我怎样才能让它这样做？

*注意:我的一切都必须在 HTML 中，仅内联编码我不能链接任何 JS 或 CSS 页面。

Answer 1

出于某种原因，我收到了关于不相关的“外部文件”的投诉，因此我更新以澄清所有这些都可以在一个文档中: Live demo (click).

<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 demo (click).

  <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 中引用 javascript 函数的地方。)。这是一个基本示例，说明如何在没有内联 js 的情况下执行此操作并将您的样式保留在 css 中: Live demo (click).

  <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 = '';
});

为什么这样做而不是内联 js？阅读这些结果 - 有很多! https://www.google.com/search?q=Why+is+inline+js+bad%3F