Question

我试图通过使用兄弟元素并在相邻选择器（+）的悬停上应用隐藏/显示效果来制作一个简单的下拉侧菜单。除了一个恼人的细节外，它几乎完美无缺：悬停应该应用于两个兄弟姐妹，但它们之间似乎有一个空的空隙，这样当光标离开第一个元素时它会隐藏另一个兄弟，因为它＆＃39 ;不再徘徊在他们中间了。

JSFiddle example

HTML：

<div class="dropdown">
  <h1>Title 1</h1>
  <a>Item 1</a>
  <h1>Title 2</h1>
  <p>Item 2</p>
  <h1>Title 3</h1>
  <ul>
    <li>Item 3.1</li>
    <li>Item 3.2</li>
    <li>Item 3.3</li>
  </ul>
</div>

CSS：

.dropdown {
    text-align: left;
    color: #00F;
    background-color: transparent;
}
h1 {
    display: inline-block;
    border-top: 1px solid #000;
    width: 290px !important;
    color: #F00;
    font-weight: 500;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    padding-top: 13px;
    line-height: 30px !important;
}
h1 a,
h1 a:visited {
    color: #FFFDFD;
}
h1:nth-of-type(1) + * {
    display: block;
}
h1 + * {
    display: none;
}
h1:hover + *,
h1 + *:hover {
    display: block;
}

我知道我可以将它们包装成亲子关系，但是在范围内我不能做到这一点。另一种解决方法可能是，不是设置display：none来隐藏然后显示：阻止在悬停时显示它们，我可以将max-height设置为0，然后将max-height设置为任何大小，以便逃脱在兄弟姐妹之间无效，我只需设置一个.5s甚至1s长的过渡效果，这样用户就有足够的时间将光标放在第二个兄弟姐妹隐藏之前，但其主要问题是机会是可能有一个表作为隐藏元素之一，因为我们知道它不可能将高度设置为表，因此它永远不会被隐藏。

Answer 1

https://jsfiddle.net/Liamm12/78dyfjw4/1/

你好！我刚刚改变了

walk

要

grid = [[x,y] for x in -2:2, y in -1:1]
5×3 Array{Array{Int64,1},2}:
 [-2,-1]  [-2,0]  [-2,1]
   ⋮       ⋮       ⋮ 
 [2,-1]   [2,0]   [2,1]

[(co[1],co[2]) for co in intersect(walk(2).vals, grid)]
15-element Array{Tuple{Int64,Int64},1}:
 (0,0)  
 (1,0)  
 ⋮ 
 (-2,0) 
 (-2,-1)

这里是完整的代码

HTML：

add(App, Params, Callback){
    var self = this;

    var Data = self.process_fields(Params)

    self.$http.post(
        paths.api + '/app/' + App.Permalink,
        new URLSearchParams(Data)
    ).then(function (error, response) {
        console.log("then");
        if (typeof (Callback) == "function") {
            Callback(true, response.data.data);
        }
    }).catch(function(error){
        console.log("catch");
        if(typeof error.response !== "undefined"){
            errors.render(error.response.data.error)
        }

        if (typeof (Callback) == "function") {
            Callback(false, null);
        }
    });
}

CSS：

h1:nth-of-type(1) + * {
    display: block;
}

带有下拉菜单的悬停效果并不涵盖所需的元素

1 个答案: