Question

所以我想在浏览器大小780上消除div [ex2]的外观并在鼠标指向ex div时重新设置，当我在分辨率780中打开时，home1 / home2 / profile1 / profile2中的div为none当鼠标指向div ex（“ME”）时重铸。对不起英文

UnicodeEncoding()

Answer 1

+因为ex2旁边的ex

@media screen and (max-width: 780px){   
     .ex2 ul li{
        display: none;
     }
        .ex:hover + .ex2 > ul > li{
        display: block;
     }
    }

编辑：工作

＆＃13;

<html>
<head>
<style>
@media screen and (max-width: 780px){   
 .ex2 ul li{
    display: none;
 }
    .ex:hover + .ex2 > ul > li{
    display: block;
 }
}
</style>
</head>
<body>
<div class = "ex">
    <li>ME</li>
</div>

<div class="ex2">
  <ul>home
    <li><a href ="#">home 1</li>
    <li><a href ="#">home 2</li>    
  </ul>
  <ul>Profile
    <li><a href ="#">Profile 1</li>
    <li><a href ="#">Profile 2</li> 
  </ul>
</div>
</body>
</html>

＆＃13;

Answer 2

您只能通过将:hover应用于父ul元素然后使用+兄弟选择器来执行此操作。另一个选择是使用像Rohit Azad所建议的JavaScript。

@media screen and (max-width: 780px) {
  .ex2 ul li {
    display: none;
  }
  .ex:hover + .ex2 ul li {
    display: block;
  }
}

<div class="ex">
  <li>ME</li>
</div>

<div class="ex2">
  <ul>home
    <li><a href="#">home 1</li>
    <li><a href ="#">home 2</li>    
  </ul>
  <ul>Profile
    <li><a href ="#">Profile 1</li>
    <li><a href ="#">Profile 2</li> 
  </ul>
</div>

如何在另一个div中使用css进行悬停效果？

2 个答案: