Question

我尝试过如下，我从stackoverflow搜索，但还没有工作！这是在const AWS = require('aws-sdk'); AWS.config.update({region:'eu-central-1'}); const kms = new AWS.KMS({ apiVersion: '2014-11-01' }); kms.generateDataKey({ KeyId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', KeySpec: 'AES_256', }).promise() .catch(err => { console.error('generateDataKey error', err.message, err.stack); throw err; }) .then(data => { console.log(data); });上进行的，所以我链接了我尝试过的here。我想在riot.js向下箭头按钮时显示.overlay div但尚未显示。

#over

Answer 1

这些选择器都不起作用，因为div.overlay既不是div#over的后代，也不是div.overlay的兄弟。

要做你想做的事情 - 使用纯CSS，你需要稍微改变HTML结构 - 以便制作两个div的兄弟姐妹。

例如，在div#over旁边添加<h3>{Now} {opts.title} <div id='over'>^</div> <div class='overlay'> <li>Editable</li> </div> </h3>可以解决问题：

#over:hover + .overlay {
    opacity:1;
}

这需要遵循CSS规则：

div.overlay

但是这需要你调整MAX( cast(to_date(from_unixtime(unix_timestamp(yourdate , 'MM-dd-yyyy'))) as date))的绝对位置。我把它留给你。

这里有更新的plnkr：http://plnkr.co/edit/nSNn1t0Lpuw9uUZQ1N8h?p=preview

Answer 2

您需要更改HTML结构以在CSS中实现此功能并使用 ~ 一般同级选择器，例如：

在HTML中：

<div id='over'>^</div>
  <div class='overlay'>
  <div>Editable</div>
</div>

在CSS中：

#over:hover ~ .overlay {
  opacity: 1;
}

查看更新的Plunkr。

希望这有帮助！

Answer 3

因为两个div位置正在混合..鼠标输入/鼠标输出功能。尝试更改.overlay的CSS样式。

在CSS中：

.overlay {
    position:absolute;
    background:#000;
    color:white;
    list-style-type:none;
    right:30px;
    top:18%;
    opacity:0;
  }

这里的工作示例：Plunkr。

你的css样式浮动：在#over上可能是你的鼠标悬停功能的问题只有当你指向你的div的右边时才有效。

悬停在另一个上时如何显示元素？

3 个答案: