Question

我直截了当地说到这里。我想要的是当我将鼠标悬停在服务链接上时，我希望下拉内容显示...我在css技巧方面不是那么好所以请耐心等待..

<div id="Navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="nav-container">
                    <ul>
                        <li><a href= "javacsript:(0)">Home</a></li>
                        <li><a href= "javacsript:(0)">Services <i class="caret"></i></a></li>
                        <li><a href= "javacsript:(0)">Categories <i class="caret"></i></a></li>
                        <li><a href= "javacsript:(0)">Shop <i class="caret"></i></a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

//I want to show this one when I hover on services
<div class="row dropdown-content">
    <div class="col-md-12">
       <p>Hello World!</p>
    </div>
</div>

所以这就是我到目前为止所尝试的内容。

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


#nav-container ul:hover .dropdown-content {
    display: block; 
}

它只会在我将div放在<ul>元素中时显示...

提前感谢...

我想只用css实现这个....

Answer 1

您需要在服务<li>中使用css postion属性放置该下拉列表div，然后只有css会在<li>

的鼠标悬停时阻止它

<强> HTML

<div id="Navigation">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div id="nav-container">
          <ul>
            <li><a href="javacsript:(0)">Home</a></li>
            <li class="dropdown"><a href="javacsript:(0)">Services <i class="caret"></i></a>
              <div class="row dropdown-content">
                <div class="col-md-12">
                  <p>Hello World!</p>
                </div>
              </div>
            </li>
            <li><a href="javacsript:(0)">Categories <i class="caret"></i></a></li>
            <li><a href="javacsript:(0)">Shop <i class="caret"></i></a></li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<强> CSS

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

 #nav-container ul li.dropdown .dropdown-content {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   display: none;
 }

 #nav-container ul li.dropdown:hover .dropdown-content {
   display: block;
 }

当您在#nav-container ul li.dropdown:hover .dropdown-content之后撰写.dropdown-content时，{c} #nav-container ul li.dropdown这意味着.dropdown-content是#nav-container ul li.dropdown的子元素，这就是为什么我们需要把它放在<li>在服务SliceConcatExt中让它充当孩子。

Answer 2

为服务添加一个类，如

 <li><a href= "javacsript:(0)" class="service">Services <i class="caret"></i></a></li>

在悬停此类时，将下拉内容的css diplay设置为阻止或任何

你可以参考这里

On a CSS hover event, can I change another div's styling?

Answer 3

首先把那个有针对性的dropdown div放在你想要悬停的锚点旁边，然后给那个锚点唯一的id以便更容易访问例子id ='service'喜欢这个：

<a id="service" href= "javacsript:(0)">

。然后访问id为这样的锚来设置悬停样式：

#service:hover + .dropdown-content {
    display: block; 
}

你可以在这里看到小提琴：https://jsfiddle.net/qz86zauu/

我希望这有帮助。

Answer 4

您可以使用:target轻松实现此目的。

您可以将所有divs放入.target并根据其显示。{p> 使用:target`伪类
的片段标识符（哈希）

. It doesn't move the contents between divs`，但我认为效果接近你想要达到的效果。

看看它是如何完成的

＆＃13;

.dropdown-content div{
    background-color: #f9f9f9;
    width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 5;
    border: 1px solid #c6c6c6;
}


#nav-container ul:hover .dropdown-content {
    display: block; 
}

.target > div {
    display:none;
}


.target > div:target{
    display:block;
}

＆＃13;

<div id="Navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="nav-container">
                    <ul>
                        <li><a href= "#home" class="home" >Home</a></li>
                        <li><a href= "#services" class="services">Services <i class="caret"></i></a></li>
                        <li><a href= "#categories" class="categories">Categories <i class="caret"></i></a></li>
                        <li><a href= "#shop" class="shop">Shop <i class="caret"></i></a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row dropdown-content target">
     <div id="home" class="col-md-12">
       <p>Hello Home!</p>
    </div>
    
    <div id="services" class="col-md-12">
       <p>Hello services!</p>
    </div>
  
   <div id="categories" class="col-md-12">
       <p>Hello categories!</p>
    </div>
</div>

＆＃13;

当另一个元素悬停时显示div元素

4 个答案: