当我将鼠标悬停在按钮(“类别”)上时,我试图在文本信息框中显示文本(“innerText”)。有没有人知道如何解决它?我想只有 CSS 是不够的,所以需要一些 Javascript。
更新:现在我又添加了一项。但是当我将鼠标悬停在元素上时,这两个文本现在都会显示。那么我怎样才能只显示属于每个单独元素的文本呢? ;)
.textInfo {
border: solid 1px lightblue;
}
.textInfo:hover {
background-color: #e8a4c9;
color: #fff;
}
#pastries:hover + #textInfo .innerText-cupCake {
display: block;
}
#pastries:hover + #textInfo .innerText-cheeseCake {
display: block;
}
.innerText-cupCake {
display: none;
}
.innerText-cheeseCake {
display: none;
}
.item {
background-color: lightblue;
width: 200px;
padding: 5px;
text-align: center;
}
.item:hover {
background-color: #e8a4c9;
}
h2 {
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 700;
padding: 10px;
}
<div class="wrapper">
<div class="box pastries" id="pastries">
<div class="box item cupcake">Cupcake</div>
<div class="box item cheesecake">Cheesecake</div>
</div>
<div class="box textInfo" id="textInfo">
<h2>Please, select a category first!</h2>
<div class="innerText-cupCake">
<p>Ice cream fruitcake cotton candy.</p>
</div>
<div class="innerText-cheeseCake">
<p>Chocolate sweet roll chupa chups bonbon macaroon.</p>
</div>
</div>
</div>
最佳答案
https://jsfiddle.net/4ucnxsaw/
您需要稍微修改一下 html。
<div class="wrapper">
<div class="box pastries">
<div class="box item cupcake">Category
<div class="innerText">
<p>Ice cream fruitcake cotton candy.</p>
</div>
</div>
</div>
<div class="box textInfo"><h2>Please, select a category first!</h2>
</div>
</div>
现在通过 CSS 来实现东西会很容易。只需添加样式规则
.item:hover .innerText {
display: block;
}
关于javascript - 使用 Javascript 在悬停项上显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54487585/