关于 Divs 的问题；悬停, 活跃, 内容

Question

所以我撞到了墙……这可能是因为我累了。这是我现在的小提琴。 http://jsfiddle.net/Sketchs/vAx84/

当我将鼠标悬停在 div 上时如何使它们突出显示，更具体地说，当它们是活动标签时保持某种颜色，例如红色。那么，如何将信息推送到“内容”div 中？我应该使用 jQuery 来 appendTo 吗？

谢谢

<div id="wrapper">
<div id="details">details:</div>
<div id="description">description:</div>

内容在这里

Answer 1

jsFiddle：http://jsfiddle.net/vAx84/2/

我添加了类 btn，所以当你编写 css 时，你会为所有按钮附加规则：

<div id="wrapper">
    <div id="details" class="btn">details:</div>
    <div id="description" class="btn">description:</div>
</div>
<div id="content">Content Goes Here</div>

悬停时突出显示的 CSS：

.btn:hover{
 background: #000 !important;   
}

要使您的 div 处于活动状态，您可以在您的 css 文件中创建活动 css 类：

.active{
background: red;
}

然后使用 jQuery 像这样在单击时附加该类：

    $(".btn").on("click", function(){
        $(".btn").removeClass("active");
   $(this).addClass("active");
});

这会将您当前单击的按钮着色为红色（活动按钮）。

要将信息放入内容 div，您可以像这样使用 jQuery：

$("#details").text("some text");

或点击详情按钮，例如：

    $("#details").on("click", function(){
   $("#content").text("some text");
});

请检查 jsfiddle 上的整个工作示例： http://jsfiddle.net/vAx84/2/

Answer 2

要在鼠标悬停时获得颜色，只需将:hover 添加到选项卡的新类中：

CSS：

#details:hover {
    background-color:yellow;
   }

#description:hover {
    background-color:red;
   }

更新的小提琴： http://jsfiddle.net/vAx84/1/