Question

所以我遇到了一堵墙......这可能是因为我累了。这是我目前的小提琴。 http://jsfiddle.net/Sketchs/vAx84/

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

由于

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

内容在这里

Answer 1

获取鼠标上的颜色只需将:hover添加到选项卡的新类：

CSS：

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

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

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

Answer 2

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/

关于Divs的问题;悬停，活跃，内容

2 个答案: