通过悬停另一个元素使元素可见（没有：hover-property）

Posted 2023-05-08

【中文标题】通过悬停另一个元素使元素可见（没有：hover-property）

【英文标题】：Making an element visible by hovering another element (without :hover-property)

【发布时间】：2013-01-22 20:23:56

【问题描述】：

好的，问题来了：

我有这三个 DIV：

<div id="gestaltung_cd"></div>
<div id="gestaltung_illu"></div>
<div id="gestaltung_klassisch"></div>

...而这三个 DIV——它们是不可见的 (display:none;)——位于页面上完全不同的位置：

<div id="mainhexa1"></div>
<div id="mainhexa2"></div>
<div id="mainhexa3"></div>

我想做的是： 如果我悬停“gestaltung_cd”，我想让“mainhexa1”可见，如果我悬停“gestaltung_illu”，我想让“mainhexa2”可见，依此类推……

如您所见，三个不可见的 DIV 不是前三个 DIV 的子元素……所以在这种情况下，":hover" 是不可能的。有没有简单的方法在 JQuery 中做到这一点？

谢谢， 乔辰

【问题讨论】：

你试过使用jQuery的hover函数吗？

对不起，我忘了说我对JQuery不是很熟悉......你知道怎么做吗？

【参考方案1】：

您可以使用兄弟选择器。只要 div 共享同一个父级，您仍然可以通过悬停影响它们

DEMO

生命密码：

#gestaltung_cd:hover ~ #mainhexa1,
#gestaltung_illu:hover ~ #mainhexa2,
#gestaltung_klassisch:hover ~ #mainhexa3 
    display: block;

【讨论】：

也许你应该精确的兼容性？

哦，我还以为是后来到IE的。因此，我的评论无关紧要。

【参考方案2】：

使用jQuerys的悬停功能，像这样：

$('#gestaltung_cd').hover(function() 
    $('#mainhexa1').toggle();
);

（如果不想在模糊时隐藏 div，则将 toggle() 更改为 show()）

【参考方案3】：

使用 jQuery 的hover 函数：

var divs = 
   cd:        'mainhexa1',
   illu:      'mainhexa2',
   klassisch: 'mainhexa3'
;
$('[id^=gestaltung]').hover(function() // selects all elements whose id starts with gestaltung
   $('#'+divs[this.id.slice('gestaltung_'.length)]).toggle();
);

请注意，在开启者和开启元素之间建立某种关系可能更容易，例如类或其他属性（如 nnnnnn 的回答）。

【参考方案4】：

这是一个如何执行第一个的示例，您只需对具有相关 ID 的其他两个执行相同操作即可。

$("#gestaltung_cd").hover(
function () 
    $("#mainhexa1").show();
,
function () 
    $("#mainhexa1").hide();

);

【参考方案5】：

我建议你在前三个 div 中添加一个属性，指定悬停时显示哪个 div：

<div id="gestaltung_cd" data-maindiv="mainhexa1"></div>
<div id="gestaltung_illu" data-maindiv="mainhexa2"></div>
<div id="gestaltung_klassisch" data-maindiv="mainhexa3"></div>

这样，您只需使用.hover() 方法即可处理悬停时的显示/隐藏：

$("div[data-maindiv]").hover(function() 
    $("#" + $(this).attr("data-maindiv") ).show();
,
function() 
    $("#" + $(this).attr("data-maindiv") ).hide();
);

演示：http://jsfiddle.net/GFMQR/

【参考方案6】：

$("#gestaltung_cd").hover(function(
    $("#mainhexa1").css( "visibility": "visible" );
, function() 
    //Your hover out function
);

【参考方案7】：

如果您将每个 div 块包装在一个容器中，您可以通过索引匹配它们，这将使代码无论有多少 div 都可以工作。像这样的：

<div class="gesaltung-container">
    <div id="gestaltung_cd">gestaltung_cd</div>
    <div id="gestaltung_illu">gestaltung_illu</div>
    <div id="gestaltung_klassisch">gestaltung_klassisch</div>
</div>
<div class="mainhexa-container">
    <div id="mainhexa1">mainhexa1</div>
    <div id="mainhexa2">mainhexa2</div>
    <div id="mainhexa3">mainhexa3</div>
</div>

$('.gesaltung-container div').hover(
    function () 
        $('.mainhexa-container div').eq($(this).index()).show();
    ,
    function () 
        $('.mainhexa-container div').eq($(this).index()).hide();
    
);

Example fiddle

【参考方案8】：

只是为了记录......

您可以只使用 CSS 和 html（不使用 javascript）来实现您想要的效果，但是您必须将元素放置在彼此跟随的位置并在 CSS 中使用 + 选择器。类似的东西：

HTML

<div id="gestaltung_cd"></div>
<div id="mainhexa1"></div>
<div id="gestaltung_illu"></div>
<div id="mainhexa2"></div>
<div id="gestaltung_klassisch"></div>
<div id="mainhexa3"></div>

CSS

div#gestaltung_cd:hover + div#mainhexa1 
   display:block;

div#gestaltung_illu:hover + div#mainhexa2 
   display:block;

div#gestaltung_klassisch:hover + div#mainhexa3 
   display:block;

您可以查看演示 http://tinkerbin.com/KP17XUgq

【讨论】：

您可以在不将元素彼此跟随的情况下做到这一点。检查我的答案，它使用~ 兄弟选择器

是的；）你也是对的。我在发布我的答案后几秒钟就看到了你的答案。虽然在生产中我使用+，因为我没有指定 div ids

了解+ 的工作原理很有用，但请注意，OP 明确指出隐藏的 div 位于“页面上完全不同的位置”。