Question

（阅读后，如果你有更好的问题标题，请告诉我）

好的，这是（至少对我而言）一种现象。在我学习的过程中，我遇到了困扰我的事情，因为我还没有学到一些简单的概念......但有了这个，我觉得这里值得一提。

我想要做的是创建两个垂直堆叠的矩形按钮。这两个按钮的工作方式完全相同，除了每个按钮都有不同的链接和文本。所以，基本上相同的CSS！还有四个要求：

1 - 他们必须在父母div。

2 - 它们必须有两种状态，正常和悬停，不透明度变化。

3 - 他们需要彼此重叠（彼此靠近）。

4 - div中的文字不能出现在a中。这是我自己的造型（未在任何代码中显示）

现在，我这样做时出现的问题是，第二个按钮（底部的按钮）突然出现！当光标越过它的顶部时，它会不断刷新（我想）！这是代码（注意：类“开始”和“晚期”是相同的）：

CSS：

    div.buts {
    position:relative;
    top:2px;
}
div.begin {
    width:160px;
    height:50px;
    background-color:#123;
    opacity:.9;
    color:#EEE;
}
div.begin:hover {
    width:160px;
    height:50px;
    background-color:#123;
    opacity:1;
    color:#EEE;
}
div.late {
    width:160px;
    height:50px;
    background-color:#123;
    opacity:.9;
    color:#EEE;
}
div.late:hover {
    width:160px;
    height:50px;
    background-color:#123;
    opacity:1;
    color:#EEE;
}
a.block {
    display:block;
    width:100%;
    height:100%;
    text-decoration:none;
}

HTML：

<div class="buts">
    <div class="begin">BEGIN<a class="block" href="https://www.google.com/"></a>
    </div>
    <div class="late">LATE  <a class="block" href="https://www.google.com/"></a>
    </div> 
</div>

这是jfiddle：http://jsfiddle.net/m9p26/

请参阅？当你将鼠标悬停在“LATE”按钮上时，在文本所在的顶部，但也在右边的地方，你得到了spaz-y的东西。

我尝试了一些不同的东西。我创建了多个按钮：这会创建更多按钮，其问题与第二个按钮相同（第一个按钮是唯一可正常工作的按钮）。我在第二个按钮上添加了一个边距，看看它是否只是一些重叠的东西，这给了我两个结果。如果边距很小（1-10px），则会出现问题，如果它更大（20px +）则没有热熔（但按钮不再关闭，所以nogo）。所以这表明它与div中的文本有关？最后，我尝试关闭不透明度。如果关闭底部div（class =“late”）不透明度（将正常设置和悬停设置为1），则不会发生任何事情：仍然会出现嗡嗡声但按钮不再更改不透明度。但是如果我将顶部div（class =“begin”）的不透明度改为1，对于悬停和正常，它都是固定的...但我认为这只是意味着第二个按钮，因为第一个按钮，第一个按钮总是有效。我不明白。

有人可以解决这个问题吗？这是愚蠢的问题吗？有远远优秀的CSS知识的人会解释一个我似乎想念的非常简单的概念，并解决我的问题吗？

Answer 1

所以，这里的问题基本上是文本不在“a”标签中，所以你的“a”标签被推倒了。由于您将“a”标签的高度设置为100％，因此它会在第二个按钮上方移动，从而导致朝向按钮顶部的奇怪行为。有两个简单的解决方案。

将链接文本放入其所属的“a”标记中，然后相应地设置样式。这个解决方案在这里（http://jsfiddle.net/m9p26/8/）。您最终得到以下代码片段。首先是html：
```
<div class="begin">
    <a class="block" href="https://www.google.com/">BEGIN</a>
</div>
```
和css：
```
// example for styling the "a" tag
a.block {
    display:block;
    width:100%;
    height:100%;
    text-decoration:none;
    color: black;
}
```
这非常有效。鉴于css的强大功能，您可以根据自己的需要设计“a”样式。
假设这是不可接受的，您可以将“a”标记设置为position: relative，并且您应该可以将其从那里移动到适当的位置（top: -10px左右）。

一般来说，遇到这样的问题时 - 在浏览器中使用检查员。它们是非常出色的工具，可突出显示元素并帮助您发现重叠或无效的事物。祝你好运！

Answer 2

删除

a.block {
    display:block;
    width:100%;
    height:100%;
    text-decoration:none;
}

并将display: block;添加到div.begin和div.late。

此外，您不必在css文件中的每个类前面使用div。 .（对于类）和#（对于ID）就足够了。但那是你没有问过的事情;）

CSS：两个div / a-block，尽管确切的代码，但按钮的工作方式并不相同

2 个答案: