如何在自己悬停时保持html显示？

我之前在这里找到了这个解决方案。如何在自己悬停时保持html显示？

.hiding { 
    display: none; 
} 

.trigger:hover + .hiding { 
    display:table-row; 
}

它隐藏一个表行，然后显示它悬停在另一个表行（类触发）时。

问题：我想让班级hiding显示它何时悬停在自身上。当您不再在类trigger上徘徊时，它现在回到display:none。

来源

2013-05-29 Gio

你有没有弄乱？现在试过任何东西？ –

我能想到的唯一的选择是包裹各组.trigger和.hiding元件tbody内，并且基础上tbody的所述:hover的显示/隐藏行为：

HTML：

<table> 
    <tbody> 
     <tr class="trigger"> 
      <td>text</td> 
     </tr> 
     <tr class="hiding"> 
      <td>hidden text</td> 
     </tr> 
    </tbody> 
    <!-- and so on... --> 
</table>

CSS：

tbody .hiding { 
    display: none; 
} 

tbody:hover .hiding { 
    display: table-row; 
}

JS Fiddle demo。

来源

2013-05-29 12:33:54

这会失败，他正在使用'display：none;' –

这确实会“起作用”，但会引入大量不必要的标记。例如：http://jsfiddle.net/8pzUK/1/ – xec

@xec他编辑后，我评论:)但这一个是非常好的 –

您正在使用+这是一个相邻的元素选择，我会建议你的是缠绕的元素.hiding另一个元素中说类.test，比改变你的选择一样

.test .hiding { 
    display: none; 
} 

.test:hover .hiding { 
    display: table-row; 
} 

.trigger:hover + .test .hiding { 
    display:table-row; 
}

所以我们在这里做是我们隐藏嵌套在.test在这种情况下是.hiding比我们使用:hover第二选择以显示.hiding当与.test元件悬停（由于它是存在的，但空如.hiding是display: none;内的元件）最后，但不是我们在第3声明+之后添加.test最少的，只是要确保它不会打破规则.hiding没有到.trigger较为接近，我们有.test为相邻元素.trigger

来源

2013-05-29 12:37:26

非常好！学习大量的html/css，但陷入了这一点。谢谢！ – Gio

@Gio您欢迎:) –

你不能用CSS来做到这一点。你需要的jQuery或JavaScript

试试这个

$(document).ready(function(){ 
    $(".trigger").hover(function() { 
     $(this).css({"display" : "table-row"}); 
     //or u can add class like this 
     //$(this).addClass(""); 
    },function() { 
     //if you want return back, you can do here 
    }); 
});

如果你不回悬停功能，这将保留该悬停状态。

来源

2013-05-29 12:42:59 PonrajPaul

您正在更改悬停元素的显示值（即已显示的元素...）为什么？ – xec

如何在自己悬停时保持html显示？

回答

相关问题