Question

我在section3holdingbox中有3个盒子，我想要它，所以如果用户点击其中一个盒子，它会变成更深的红色阴影，让它保持这样，直到他点击另一个盒子。对于预选的第一个盒子也有一个较暗的红色。继到目前为止我的代码，我无法让它工作

HTML: 

<div class="section3HoldingBox">

<div class="section3Box1">
        <a href="#section3"><div class="section3BoxTitleBasic">Basic</div> <!-- end of section3BoxTitleBasic -->
</div></a><!-- end of section3Box1 -->

<div class="section3Box2">
        <div class="section3BoxTitleComingSoon">Professional</div> <!-- end of section3BoxTitles -->
</div> <!-- end of section3Box2 -->

<div class="section3Box3">
        <div class="section3BoxTitleComingSoon">Deluxe</div> <!-- end of section3BoxTitles -->
</div> <!-- end of section3Box3 --> 


</div> <!-- end of section3HoldingBox -->

CSS：

.section3HoldingBox {

    width: 1350px;
    height: 210px;
    margin: 25px auto 0;
    padding: 0;
    border: blue 2px solid;
}

.section3HoldingBox a {
    text-decoration: none;
}

.section3HoldingBox a:active {

}

.section3Box1 {
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .2);
    float: left;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;

}

.section3Box2 {
    float: left;
    margin-left: 219px;
    text-align: center;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);



    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box3 {
    float: left;
    margin-left: auto;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);
    float: right;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box1:hover, .section3Box2:hover, .section3Box3:hover {
    border: 2.2px rgba(231, 76, 60, .83) solid;
    background-color: rgba(231, 76, 60, .17)
}

Answer 1

CSS :target伪类是解决此类问题的有效方法。

设置:target伪类样式规则后，您还需要添加一个简短的单行javascript，以便第一个框在窗口后立即预先选中负荷。

＆＃13;

function initialise() {
	window.location.hash = 'box1';
}


window.onload = initialise();

＆＃13;

.section3HoldingBox {
    width: 1350px;
    height: 210px;
    margin: 25px auto 0;
    padding: 0;
    border: blue 2px solid;
}

.section3HoldingBox a {
    text-decoration: none;
}

.section3Box1 {
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .2);
    float: left;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box2 {
    float: left;
    margin-left: 219px;
    text-align: center;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box3 {
    float: left;
    margin-left: auto;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);
    float: right;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box1:hover, .section3Box2:hover, .section3Box3:hover {
    border: 2.2px rgba(231, 76, 60, .83) solid;
    background-color: rgba(231, 76, 60, .17)
}

div[id^=box] a {
display: block;
height: 100%;
text-align: center;
}

div[id^=box]:target {
    border: 2.2px rgba(63, 0, 0, 1) solid;
    background-color: rgba(127, 0, 0, 1)
}

div[id^=box]:target a {
    color: rgba(255, 255, 255, 1)
}

＆＃13;

<div class="section3HoldingBox">

<div class="section3Box1" id="box1">
<a href="#box1">
<div class="section3BoxTitleBasic">Basic</div>
</a>
</div>

<div class="section3Box2" id="box2">
<a href="#box2">
<div class="section3BoxTitleComingSoon">Professional</div>
</a>
</div>

<div class="section3Box3" id="box3">
<a href="#box3">
<div class="section3BoxTitleComingSoon">Deluxe</div>
</a>
</div>

</div>

＆＃13;

当您单击其中一个框时，它可以更改颜色并保持该颜色

1 个答案: