仅在使用CSS激活悬停事件图标时显示菜单

时间:2016-08-17 21:43:43

标签: html css html5 css3

帮助,当你激活悬停aparzca div的其余部分时,我不能这样做

  • 我正在寻求激活hover -law早期级别出现,当你悬停在第一级时出现以下内容
  • 列表项

body { margin: 3%; }
div.title { 
    position: relative;         
    margin-right:2%; 
    border: 2px solid orange;
    background-color:orange;
    border-radius: 2px; 
    height: 400px; 
    width:36px; 
    float: left;        
}

.title:before { 
  position: absolute; 
  content:""; 
  border-top: 6px solid white; 
  border-bottom: 17px double white; 
  height: 5px; 
  width:30px; 
  top: 4px; 
  right:3px; 
}

.title:hover:before { 
  position: absolute; 
  content:""; 
  width:auto;
  top: 11px !important; 
  left:1px !important; 
  border-left: 16px solid rgba(255, 255, 255, 0) !important; 
  border-right: 16px solid rgba(255, 255, 255, 0) !important; 
  border-top: 16px solid white !important;
  border-bottom: none; 
  background-color:orange;
}


.item,.desplegable {
    display: none;
}
<div class="menu-option">
 
    <div class="title">
    </div>
    <input name="__RequestVerificationToken" type="hidden" value="CiVpO4FRnoe021mD68+lxPfMwBZygSRro9kFFZbmFzG89tqDv0QuHAyxo8Nsldeh8DkoVzd9+S0N7OGQhZtazNeFsmQ2ov4iuEfVCEYiHia4PVRRBCpIs/U2HvbjpffahdVYtabrA8p/XVy4TO8bh1ToRRY=">
    <div class="item">
        <a href="/Home/Index" class="formsMenu">
            <li class="viñeta3">Inicio</li>
        </a>
    </div>
    <ul class="padre">
        <a class="desplegable" href="#">
            <li class="viñeta3 viñetablanca desplegable">Administración dt</li>
        </a>
        <ul class="request-list subnavegador viñeta3" style="display: block;">
                <div class="item">
        <a href="/Campaign/List" class="formsMenu">
            <li class="viñeta3">Campañas</li>
        </a>
    </div>
    <div class="item">
        <a href="/Categories/List" class="formsMenu">
            <li class="viñeta3">Categorias</li>
        </a>
    </div>
    <div class="item">
        <a class="formsMenu">
            <li class="viñeta3" onclick="getForms()">Formularios</li>
        </a>
    </div>
    <div class="item">
        <a href="/PerformanceIndicator/List" class="formsMenu">
            <li class="viñeta3">Indicadores</li>
        </a>
    </div>
    <div class="item">
        <a href="/Hierarchies/List" class="formsMenu">
            <li class="viñeta3">Jerarquias</li>
        </a>
    </div>
    <div class="item">
        <a href="/Account/List" class="formsMenu">
            <li class="viñeta3">Usuarios</li>
        </a>
    </div>
    <div class="item">
        <a href="/StrategySettings/Index" class="formsMenu">
            <li class="viñeta3">Configurar estrategias</li>
        </a>
    </div>
    <div class="item">
        <a href="/ObjectPermissions/Index" class="formsMenu">
            <li class="viñeta3">Configurar permisos</li>
        </a>
    </div>
    <div class="item">
        <a href="/RedisCache/Index" class="formsMenu">
            <li class="viñeta3">Administracion REDIS caché</li>
        </a>
    </div>

        </ul>
    </ul>
    <ul class="padre">
        <a class="desplegable" href="#">
            <li class="viñeta3 viñetablanca desplegable">Nuevas Solicitudes</li>
        </a>
        <ul class="request-list subnavegador viñeta3" style="display: block;">
                <div class="item">
        <a class="formsMenu" onclick="CreateRequest('56ae9c06-7114-4d2a-9f9e-0f678b3130f4')">
            <li class="viñetablanca2">Credito Nuevo</li>
        </a>
    </div>

        </ul>
    </ul>
    <div class="item">
        <a onclick="WorkList('d5fe1e3d-2e08-41c2-9c62-0c57607de500','spGetAvailableInterviewsUser',0) " class="formsMenu">
<li class="viñeta3">Mis Solicitudes</li>        </a>
    </div>
    <div class="item">
        <a href="/Request/List" class="formsMenu">
            <li class="viñeta3">Busqueda de Solicitudes</li>
        </a>
    </div>

</div>

1 个答案:

答案 0 :(得分:0)

您可以使用'element1~ *'选择器来选择element1之前的每个兄弟节点。您还应该更改输入类型,因为您无法仅通过CSS更改它。

select
a.name
,sum(telat1 31-60 min) as 'telat1 1-30 min'
,sum(telat1 31-60 min) as 'telat1 31-60 min'
(
select name
,case when  telat_1_30min >=1 and telat_1_30min <=30  then 1 else o end as 'telat1 1-30 min'
,case when  timetable not like 'minggu' and timetable not like 'sabtu' and late <=90 and late >=61 then 1 else 0 end as 'telat1 31-60 min'
from timetable 
)a
group by a.name
body { margin: 3%; }
div.title { 
    position: relative;         
    margin-right:2%; 
    border: 2px solid orange;
    background-color:orange;
    border-radius: 2px; 
    height: 400px; 
    width:36px; 
    float: left;        
}

.title:before { 
  position: absolute; 
  content:""; 
  border-top: 6px solid white; 
  border-bottom: 17px double white; 
  height: 5px; 
  width:30px; 
  top: 4px; 
  right:3px; 
}

.title:hover:before { 
  position: absolute; 
  content:""; 
  width:auto;
  top: 11px !important; 
  left:1px !important; 
  border-left: 16px solid rgba(255, 255, 255, 0) !important; 
  border-right: 16px solid rgba(255, 255, 255, 0) !important; 
  border-top: 16px solid white !important;
  border-bottom: none; 
  background-color:orange;
}

.item,.desplegable, input[type="text"] {
    display: none;
}

.title:hover ~ *, .title:hover ~ * .item, .title:hover ~ * .desplegable {
    display: block;
}