在子元素悬停时隐藏/显示正文中的文本答案

【问题标题】：Hide/show text in body on hover of child element在子元素悬停时隐藏/显示正文中的文本
【发布时间】：2013-09-09 11:51:41
【问题描述】：

我想最初在我的正文中隐藏文本，但是一旦将子 div 中的元素悬停在上面，就会显示它。所以在这种情况下，我希望它们最初都以display: none 开头，但是当我将鼠标悬停在字母“H”上时，我希望显示“文本 A”。当我将鼠标悬停在字母“E”上时，我希望显示“文本 B”。我不想将我的#content 元素放在我的#word 元素中。我想将它们保留为单独的 div。

有什么想法吗？

（参见下面的小提琴）

HTML：

<div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a id="e" class= "letter" href=#>E</a></h1>
    <h1><a id="l" class= "letter" href=#>L</a></h1>
    <h1><a id="l2"class= "letter" href=#>L</a></h1>
    <h1><a id="o" class= "letter" href=#>O</a></h1> 
</div>

<div id="content">
    <div id="textA">Text A</div>
    <div id="textB">Text B</div>
</div>

CSS：

 body {
    font-family: 'Chango', cursive;
    font-size: 115px;
    color: white;
    text-shadow: 5px 5px 5px #000;

    width: 100%;
    height: 100%;
    margin: 0px;
    background: black;
    }

    #name {
    position:absolute; 
    height:100%; 
    width: 70%;
    display: table;
    padding: 0 15% 0 15%;
    background: black;
    }

    h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 1em;

    }

    a {
    /*border: 1px solid black;*/
    display: inline-block;
    line-height: 89%;
    overflow: hidden;

    }

    a:visited, a:active {
    text-decoration: none;
    color: white;
    /*color: #E8E8E8;*/

    }

    a:link {
    text-decoration: none;
    color: white;
    text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;

    }

    a:hover {
    text-shadow: 5px 5px 5px #000;
    color: white;
    }

小提琴： http://jsfiddle.net/ADfhj/1/

PS- 我尝试了以下 CSS 无济于事：

#textA {
display: none;
}

#word:hover #textA {
display: block;
}

【问题讨论】：

很确定你不能用 CSS 隐藏和显示外部元素。我认为这是一些简单 JS 的工作。
CSS 目前无法像这样引用同级元素。你需要一个 JavaScript 解决方案
看到这个小提琴：jsfiddle.net/hGp7P/1 看起来兄弟 div 正在改变。
@Keven 你可以修改直接的兄弟姐妹，但是在这里你是在 DOM 上移动然后再返回（a:hover [up to] h1 [up to] #word [over给兄弟]#content [下给孩子]#textA)。
我非常接近在没有 JavaScript 的情况下获得它。不幸的是，CSS 无法更改悬停时的 z-index，否则我会弄明白的。

标签： html css hover

【解决方案1】：

仅使用 css 是无法实现的。但是，您可以尝试简单的 javascript/jquery。

 $('.letter').mouseover(function(){
    var cont = $(this).attr('id');
    $('#content>div').hide();
    $('#text_'+cont).fadeIn();
});

查看Fiddle

【讨论】：

是的，即使它不是 CSS，它仍然可以很好地工作，并且编码最少。谢谢！