Question

以下HTML和CSS代码段可以正常工作：

.dropdown:hover .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;
  top: 50px;
  left: 50px;

}

<li class='dropdown'>Features ▾
  <ul class='features-menu'>
    <li><a href='#'>Harder</a></li>
    <li><a href='#'>Better</a></li>
    <li><a href='#'>Faster</a></li>
    <li><a href='#'>Stronger</a></li>
  </ul>
</li>

但是，如果我尝试将文本Features括在span或div中，那就是

<li class='dropdown'><span>Features ▾</span>

对我的CSS进行以下有关悬停的更改

.dropdown span:hover .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;
  top: 50px;
  left: 780px;

}

悬停不再呈现。为什么这种方法不起作用？我以为是因为span是一个内联元素，但后来我也用div进行了尝试，但仍然无法渲染。

Answer 1

假设您的标记是这样的：

<li class='dropdown'><span>Features ▾</span>
  <ul class='features-menu'>           
  <li><a href='#'>Harder</a></li>
  <li><a href='#'>Better</a></li>
  <li><a href='#'>Faster</a></li>
  <li><a href='#'>Stronger</a></li>
  </ul> 
</li>

悬停不再呈现。为什么这种方法不起作用？我以为可能是因为span是一个内联元素，但是后来我也用div尝试了它，但仍然无法渲染。

此CSS声明：.dropdown span:hover .features-menu仅适用于.features-menu的子元素span。但是在这种情况下，.features-menu是span的同级，这就是为什么它不起作用的原因。

您可以改用adjacent sibling selector (+)：

.dropdown span:hover + .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;      
  top: 50px;
  left: 780px;

}

或者只是不对以前的CSS声明做任何更改：

.dropdown:hover .features-menu{
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;      
  top: 50px;
  left: 780px;
}

Answer 2

要回答您的问题，您需要更多地了解CSS选择器。

让我们解释第一个（起作用的CSS）选择器.dropdown:hover .features-menu =当类dropdown处于hover状态时选择所有元素，并为features-menu类设置属性<坚强内部认为.dropdown

现在第二个CSS .dropdown span:hover .features-menu读取：选择所有span类中的所有dropdown元素 }}为hover

的features-menu类内部声明并设置属性

由于在您的工作示例中，.dropdown span元素包含.dropdown，所以可以。但在第二种情况下，.features-menu元素不包含.dropdown span

在此处使用“同级”选择器可能会有所帮助：

.features-menu

.dropdown span:hover ~ .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;

  position: absolute;
  top: 50px;
  left: 50px
}

Answer 3

您的原始CSS应该与引入的新@Override public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View layoutView; switch (viewType) { case USER_HEADER: layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_user_header, parent, false); return new HeaderViewHolder(layoutView); default: layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_user_info, parent, false); return new AppListViewHolder(layoutView, onRecyclerItemClick); } } @Override public int getItemViewType(int position) { if (position == 0) { return USER_HEADER; } return USER_ITEM; } @Override public void onBindViewHolder(@NonNull final RecyclerView.ViewHolder holder, final int position) { if (holder.getItemViewType() == USER_HEADER) return; final AppListViewModel appListViewModel = appListViewModels.get(position - 1); final AppListViewHolder appListViewHolder = (AppListViewHolder) holder; if (!appListViewModel.isAppInstalled()) { appListViewHolder.textAppLink.setText(appListViewModel.getAppLink()); } else { appListViewHolder.textAppLink.setText(""); } appListViewHolder.textAppName.setText(appListViewModel.getAppName()); appListViewHolder.itemView.setTag(appListViewModel); // TODO I want to add this progressbar and image after every 3 sec. Just like checking the installation after every 3 sec. appListViewHolder.progressBar.setVisibility(View.VISIBLE); appListViewHolder.imageStatus.setImageResource(appListViewModel.isAppInstalled() ? R.drawable.ic_check_green : R.drawable.cancel); setAdapterData(holder); loaderStatusListner.isLoadingComplete(true); } private void setAdapterData(RecyclerView.ViewHolder viewHolder){ this.viewHolder = viewHolder; } public RecyclerView.ViewHolder getAdapterData(){ return viewHolder; } @Override public int getItemCount() { return 1 + appListViewModels.size(); } private static class HeaderViewHolder extends RecyclerView.ViewHolder { HeaderViewHolder(View itemView) { super(itemView); } } static class AppListViewHolder extends RecyclerView.ViewHolder { @BindView(R.id.image_app_status) public ImageView imageStatus; @BindView(R.id.text_app_name) TextView textAppName; @BindView(R.id.text_app_link) TextView textAppLink; @BindView(R.id.progress_bar) public ProgressBar progressBar; AppListViewHolder(View view, final OnRecyclerItemClick onRecyclerItemClick) { super(view); ButterKnife.bind(this, view); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { AppListViewModel commonTicketViewModel = (AppListViewModel) v.getTag(); onRecyclerItemClick.onItemClick(v, getAdapterPosition(), commonTicketViewModel); } }); } }一起使用。悬停的CSS选择器<span>仍将以.dropdown:hover .features-menu的父元素为目标，这意味着当父元素仍然存在时，悬停效果仍应起作用。

我将其放在代码笔上以演示： https://codepen.io/littlefinger42/pen/ebWYJP

悬停在一种情况下有效，但在另一种情况下无效

3 个答案: