Question

我想创建四个盒子（顶部2个，下面两个），当一个人悬停在那个盒子上时，它们都必须位于页面的中心，它应该移动一点并改变盒子颜色。每个框应该包含一些文本，所以Option1，option2，option3和option4：这是我的四个框：

    <div class="selectBox" >
    <div class="firstTwoOptions">
        <div class="foo" id="option1" style="background-color:green;"></div>
        <div class="foo" id="option2" style="background-color: black;"></div>
    </div>

    <div class="lastTwoOptions" style="display:block; clear:both;">
        <div class="foo" id="option3"  style="background-color:yellow; "></div>
        <div class="foo" id="option4" style="background-color:blue;"></div>
    </div>
</div>

我的CSS：

.foo {   
float: left;
width: 200px;
height: 200px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);}

现在我如何将所有方框带到屏幕中间，让它们切换并在里面显示文字：一旦添加文本的方式是：

$("#option1").text("select option one");

在这里，我只获得普通文本，我希望文本位于该框的中心，大文本和粗体。

Answer 1

我不知道我是否理解你的问题以及这是否有助于你但在此页面（Fiddle）中，您有四个框居中，在鼠标悬停时，它们随机更改颜色，文本显示在元素的中心上在mouesout文本上消失，所有元素都检索原始颜色
你需要的所有jQuery代码是

<script type="text/javascript">
$(document).ready(function(){
    var colors=['green','black','yellow','blue']
    $('.foo').hover(function(){
        var str = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'
        $(this).css({'background-color':str}).addClass('rotate')
        },function(defaultColor){
            var ind=$(this).index() 
            $(this).css({'background-color':colors[ind]}).removeClass('rotate')
        })
})
</script>

如果此解决方案不符合您的需求，我会为您浪费时间而道歉。

Answer 2

检查出来：

<强> HTML

<div class="selectBox">
<div class="firstTwoOptions">
    <div class="foo" id="option1" style="background-color:green;"><p>select option one</p></div>
    <div class="foo" id="option2" style="background-color: black;"><p>select option one</p></div>
</div>
<div class="lastTwoOptions" style="display:block; clear:both;">
    <div class="foo" id="option3" style="background-color:yellow; "><p>select option one</p></div>
    <div class="foo" id="option4" style="background-color:blue;"><p>select option one</p></div>
</div>
</div>

<强> CSS

.foo {
float: left;
width: 200px;
height: 200px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, .2);
text-align:center;
}
.selectBox {
margin:0 auto;
width:425px;
}
.foo p {
display:none;
}

<强> JAVASCRIPT

$(document).ready(function() {
$(".foo").hover(function() {
    $(this).find('p').css('display','inline');
    bg = $(this).css('background-color');
    $(this).css('background-color','#FFF');
},function() {
    $(this).find('p').css('display','none');
    $(this).css('background-color',bg);
});
});

这是 FIDDLE

创建四个框，悬停在功能上

2 个答案: