更改css中的可见性属性？

Posted 2023-02-21

技术标签:

【中文标题】更改css中的可见性属性？【英文标题】：Changing visibility property in css? 【发布时间】：2011-12-27 01:12:42 【问题描述】：

<style>
#count2
visibility:hidden;

#count1:hover
background:#123456;
//how do I change the visibility property of #count2 here?

</style>
<div id="count1">My visible element</div>
<div id="count2">My flickering element</div>

我的问题很清楚，但可能有点奇怪。当有人将鼠标悬停在 #count1 上时，如何仅使用 css 将 #count2 的可见性属性更改为 true。

【问题讨论】：

我不太确定，所以我将其发布为评论。我认为如果没有 javascript，这是不可能的。当您翻转#count2 时，您希望它显示，而不是隐藏？您是否有空闲使用兄弟选择器？不，我想在悬停在 #count1 上时操纵 #count2 的可见性，这在 css 中是否可行，或者我应该使用 jquery？ @JennyDcosta - 正如 BoltClock 在他的回答中提到的，在 CSS 中是可能的，但如果您需要支持 IE6，则需要一些 Javascript 帮助。（当然，JQuery 是一种选择。） 【参考方案1】：

由于您在悬停其中一个时修改了两个不同的元素，因此您可以在单独的规则中使用同级组合器后跟 #count2 选择器来修改该特定元素：

#count2 
    visibility: hidden;


#count1:hover 
    background: #123456;


#count1:hover + #count2 
    visibility: visible;

【讨论】：

如果你不幸不得不支持 IE6，你将不得不使用 jQuery... @JennyDcosta - 你在测试哪个浏览器？这适用于 FFX 3.5、IE7、IE8 和 Chrome……正如 BoltClock 所说，如果您需要 IE6 支持，则需要一些 Javascript 帮助。【参考方案2】：

您必须使用 + 选择器，它选择相邻的兄弟姐妹：

#count2 
    visibility:hidden;

#count1:hover 
    background:#123456;

#count1:hover + #count2 
    visibility: visible;

这是小提琴：http://jsfiddle.net/Yyr64/

如果您必须针对较旧的浏览器，并且您使用的是 jQuery，那么您必须这样做：

var $count2 = $('#count2');

$('#count1').hover(function()
    $count2.css('visibility', 'visible');
, function()
    $count2.css('visibility', 'hidden');
);

...这里的小提琴：http://jsfiddle.net/Yyr64/1/

【讨论】：

@Jenny Dcosta - 当然。您只需要更改选择器。 @Jenny Dcosta：你检查过 Joseph 发布的链接吗？如果他的链接有效，但您的代码无效，您可能需要向我们展示您的确切代码（如果它与您发布的不同）。【参考方案3】：

上面的解决方案可以用下面的jsfiddle抽象出来：http://jsfiddle.net/mousepotatoweb/PVHzK/2/

<style>
[id|="count-1"]
background:#123456;


[id|="count-2"]
visibility:hidden;



[id|="count"]:hover ~ [id|="count"]  visibility: visible;
</style>

<div id="count-1">My visible element</div>
<div id="count-2">My flickering element</div>

【讨论】：

小心 - :nth-of-type() 查看元素类型，而不是属性。将属性选择器与:nth-of-type() 结合使用可能会导致意外结果。是的，编辑了它 - 使用伪选择器有点疯狂。感谢您的提醒。【参考方案4】：

count2 需要是 count1 的子节点才能仅通过 css 执行此操作。

<div id="count1">
    My visible element
    <div id="count2">My flickering element</div>
</div>

#count1:hover #count2 display: block; background: #ffff00; 
#count2 display: none;

但在使用 css2 时，您可以使用 + 选择器，如 Joseph Silber 的回答中所示

【讨论】：

【参考方案5】：

使用