在HTML/CSS/JavaScript中创建可单击区域

因此，我在一些帮助下创建了以下代码：

我不知道如何输入代码，它一直在一行上创建所有内容，格式看起来不可读，因此这里有一个链接：

无论哪种方式，当鼠标位于黑线上方时，它都会向下展开。 我怎样才能使防噪区域变大

例如，如果鼠标悬停在线条下方15个像素处，线条将展开。我怎么能让它这么做

---

*注意：我的所有内容都必须是HTML，只有内联编码，我不能链接任何JS或CSS页面。

要增加悬停更改的边框

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

到15像素

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

---

您可以将该div放在一个较大的div中，并在较大的div上设置onclick事件

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

---

出于某种原因，我收到了与“外部文件”无关的投诉，因此我正在更新，以澄清所有这些都可以放在一个文档中：

<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>

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

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

我使用的不是JavaScript，而是CSS

：hover

。这里的技巧是将元素包装在另一个元素中，并填充外部元素，以便可以将鼠标悬停在该填充上以影响内部元素

如果您确实想使用JavaScript，请使用内联js忽略此处的任何答案（这就是您在html中引用JavaScript函数的地方）。下面是一个基本示例，说明如何在没有内联js的情况下实现这一点，并将样式保留在css中：

<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>

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

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

JavaScript:

.outer {
  padding-bottom: 15px;
}

.inner {
  border: 1px solid black;
}

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

#outer {
  padding-bottom: 15px;
}

#inner {
  border: 1px solid black;
}

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

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

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

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

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

为什么这样做而不是内联js？阅读这些结果-有很多

这就是解决方案

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

---

这里有一个使用带填充的包装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>

功能变更（要素）{
element.firstElementChild.style.border=“3px纯黑色”；
}
功能恢复（元素）{
element.firstElementChild.style.border=“1px纯黑色”；
}

因此，您可以在边界下悬停15像素，边界将更改并恢复

---

小提琴

我不明白你到底想实现什么？注意：我所有的东西都必须是HTML，只有内联编码，我不能链接任何JS或CSS页面呃…为什么？如果你有一个JSFIDLE，你也应该在堆栈溢出问题中包含你的代码我不能，我不知道如何。。。它不起作用。它必须是在线内联编码，因为我正在使用一个程序来编辑我的网站，html已经构建好了，我不能编辑代码，我只能添加html代码段。他不能使用外部样式表。是的，CSS会更简单，但我在问题中写道，我不能使用外部CSS或JS页面，它必须是内联CSS，我不知道如何在内联HTML中添加悬停功能。@Bodokh所有这些都不需要外部任何东西。你是什么意思？它不需要！你有HTML和CSS在不同的工作表！我需要一张纸写出来。@RCorrie我的答案不需要它们。不管是谁否决了……那真是糟糕透了。@Bodokh，请不要！不要使用内联js！！请再读一遍我的答案。@Bodokh我从你的另一条评论中看出，你只想使用一个程序，而不关心好的web编码原则。我给你介绍了一些同样有效但不使用坏习惯的东西。其他人可能会看到这篇文章并效仿它。通过接受这个答案，你给了内联风格和内联js更多的可信度，它们都不是解决问题所必需的，而且都是不好的做法——特别是内联js。尽管如此，如果你想要的只是简单地工作而不考虑其完整性，不要担心它。然而，不使用内联js对开发人员和后续开发人员只有好处（可读性、可重用性/干式、将逻辑与输出分离等），绝对没有什么不利于它的（因为这里的代码没有业务逻辑）但是我也更喜欢简单的css解决方案。@johnSmith是的，如果他在帖子中提到他正在使用一个程序来生成所有代码，我就不会在意它了。知道这一点，您的解决方案是有意义的，但问题本身并不清楚。显然，我不希望使用内联JS和CSS，但在这个特定的问题上，这是唯一的方法。我总是使用样式表，它更简单，也更悦目。别误会我的意思。不管怎样，非常感谢！