Question

对不起，我是新手，但是我对网络开发很陌生。

我有一个代码，允许我在网站上放置一个可悬浮的元素。问题是我现在想将其传输到可点击的元素-最好是右键单击。

我尝试使用CSS中的：active选项来执行此操作，但是它不起作用。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.dropdown:hover .dropdown-content {
   display: block;
}

有没有简单的方法可以在纯CSS中实现这一目标？

Answer 1

在纯CSS中，您可能必须使用所谓的the checkbox hack。基本上，您使用复选框来记录下拉列表是否打开，并使用library(dplyr) n <- 2 df %>% group_by(id) %>% mutate(r = case_when(p == 1 & all(q[(which.max(p == 1) + 1) : (which.max(p == 1) + n)] == "y") ~ "y", p == 1 ~ "n", TRUE ~ "-")) # id p q r # <int> <int> <fct> <chr> # 1 1 1 n y # 2 1 0 y - # 3 1 0 y - # 4 2 0 n - # 5 2 1 y n # 6 2 0 n - # 7 2 0 y - # 8 3 0 n - # 9 3 1 y n #10 3 0 n - #11 3 0 n -伪类来确定是否显示:checked。

dropdown-content

#dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

#dropdown:checked ~ .dropdown-content {
  display: block;
}

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

我建议为此使用Javascript。

通常，在JS中，这是通过向下拉组件本身添加诸如“活动”或“开放”之类的类来完成的。然后，您可以修改CSS选择器以显示下拉菜单内容，从<label for="dropdown">Dropdown</label> <input type="checkbox" id="dropdown"> <div class="dropdown-content"> And this is the content. </div>到.dropdown:hover .dropdown-content。

为此，您将需要一个事件监听器来单击（甚至可能需要某些键盘事件，例如Enter键），然后将“ open”或“ active”类添加到下拉列表中。这是一个片段，展示了如何做到这一点：

.dropdown.open .dropdown-content

var dropdown = document.querySelector(".dropdown");
dropdown.addEventListener("click", function(e) {
  var dropdown = e.target;

  // If it has "open" class, remove it. Else add it.
  if (dropdown.classList.contains("open")) {
    dropdown.classList.remove("open");
  } else {
    dropdown.classList.add("open");
  }
});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown.open .dropdown-content {
  display: block;
}

如何将悬停下拉列表转换为可点击的下拉列表？

1 个答案: