Question

当用户在div上盘旋但尚未工作时，我试图使按钮可见。

＆＃13;

{
   "aggregations":{
      "domains":{
         "doc_count_error_upper_bound":0,
         "sum_other_doc_count":0,
         "buckets":[
            {
               "key":"other",
               "doc_count":8679,
               "environments":{
                  "value":49
               }
            },
            {
               "key":"CREATIVESandPREVIEWS",
               "doc_count":1235,
               "environments":{
                  "value":21
               }
            },
            {
               "key":"Integration",
               "doc_count":65,
               "environments":{
                  "value":1
               }
            },
            {
               "key":"devops",
               "doc_count":1,
               "environments":{
                  "value":1
               }
            }
         ]
      }
   }
}

＆＃13;

#!/bin/bash
curl -u xx:xx -H 'Content-Type: application/json' -XPOST 'http://172.21.4.55:9200/log_index-dev-gcecomputeinstances-*/_search?size=0' -o instancesdomainagg.json --data @instancesdomainaggquery.json

var=0
for domain in $(cat instancesdomainagg.json | jq '.aggregations.domains.buckets[].key' | sed -e 's/^"//' -e 's/"$//' | sed -e 's/\(.*\)/\L\1/'); do
curl --trace-ascii curl.trace -u xx:xx -H 'Content-Type: application/json' -XPOST 'http://172.21.4.55:9200/log_index-dev-gcebillingbq-*/_search?size=0' -o bqdomainagg.json --data-binary '{"query":{"bool":{"must":{"term":{"environment_domain.keyword":"'"$domain"'"}},"filter":{"range":{"usage_end_time.value":{"from":"now-1d","to":"now"}}}}},"aggs":{"cost":{"sum":{"field":"cost"}}}}'
val="$(cat bqdomainagg.json | jq '.aggregations.cost.value')"
jq '.aggregations.domains.buckets['"$var"'] |= .+ {"cost": "'"$val"'"}' instancesdomainagg.json > output.json
var=$((var+1))
done

＆＃13;

按钮显示最初设置为#box{ background-color: red; } .btn { position: relative; z-index: 1; display: none; } .foo:hover + .btn{ display: inline-block; } /*ignore from here*/ .foo { position:relative; width:500px; height:500px; } .foo img { width:100%; vertical-align:top; } .foo:after, .foo:before { position:absolute; opacity:0; transition: all 0.3s; -webkit-transition: all 0.3s; } .foo:after { content:'\A'; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.8); } .foo:before { content: attr(data-content); color:#fff; z-index:1; padding:4px 10px; text-align:center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .foo:hover:after, .foo:hover:before { opacity:1; } /*ignore to here*/。当用户将鼠标悬停在div上时，它将设置为<div id="box" class="foo" data-content="Caption"> <button class="btn">view</button> </div>。当用户在div上悬停时，我该怎么做才能将按钮置于顶部并可见

Answer 1

只需将您的+号更改为＆gt;标志。按钮位于div内部，与其不在同一级别。 +适用于同一级别的项目

   .foo:hover > .btn{
      display: inline-block;
    }

Answer 2

你几乎就在那里，但要选择按钮，你需要fstat（儿童组合器）来选择悬停的fcntl的孩子。选择后续兄弟姐妹时，请使用>。

div

Answer 3

+组合子选择相邻的兄弟姐妹。这意味着第二个元素直接跟在第一个元素之后，并且它们共享同一个父元素。/*ignore from here*/ .foo { position: relative; width: 500px; height: 500px; } .foo img { width: 100%; vertical-align: top; } .foo:after, .foo:before { position: absolute; opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; } .foo:after { content: '\A'; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); } .foo:before { content: attr(data-content); color: #fff; z-index: 1; padding: 4px 10px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .foo:hover:after, .foo:hover:before { opacity: 1; } /*ignore to here*/ #box { background-color: red; } .btn { position: relative; z-index: 1; display: none; } .foo:hover>.btn { display: inline-block; }不是<div id="box" class="foo" data-content="Caption"> <button class="btn">view</button> </div>的兄弟，但它是他的孩子。所以删除.btn选择器。

更改

.foo

要

+

.foo:hover + .btn{

.foo:hover .btn{

div悬停时可见的按钮

3 个答案: