1

如何通过单击超链接将:target1个小红框transition变成一个黄色圆圈，然后使同一个小框过渡到一个蓝色方块？

这是我的小红方块的 CSS：

#Redsquare{    
    height: 15px;    
    width: 15px;    
    background-color: rgb(255,0,0);    
    position: absolute;    
    top: 330px;    
    left: 640px;    
    transition: all 0.5s linear;    
}

这是针对#Redsquare黄色圆圈的代码。

#Redsquare:target{    
    height: 300px;    
    width: 300px;    
    border-radius: 50%;    
    background-color: rgb(255,255,0);    
    top: 200px;    
    left: 500px;
}

但我希望同样的小圆圈也可以通过按下另一个按钮来转换为 Bluesquare。

4

1 回答 1

2

这是可以做到的。但它需要嵌套在 HTML 中，如下面的代码所示。如果您需要将相同的内容转换超过两到三次，请不要使用这种方法，因为标记会变得过于混乱。基本上我们在这里做的事情如下：div

  1. 将被转换的元素是divwith 类 as box。但是，它将如何以及转换为什么取决于单击的链接和关联的目标。
  2. 单击第一个链接时，最外面div的带有Yellowcircle是目标。根据 CSS，当is时，具有 class 的元素box将被转换为黄色圆圈。targetYellowcircle
  3. 单击第二个链接时，Bluesquarediv 变为 ，target在这种情况下，根据 CSS，box应该变为蓝色方块。
  4. 最后，当第三个链接被点击时，目标是 general #，所以.box会应用默认的 CSS 样式，它会变回红色方块。

还有其他选择，但它们涉及 JavaScript。

.box {
  height: 150px;
  width: 150px;
  background-color: rgb(255, 0, 0);
  transition: all 0.5s linear;
}
#Yellowcircle:target .box {
  border-radius: 50%;
  background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
  background-color: rgb(0, 0, 255);
}

/* Just for demo */

a {
  position: relative;
  margin: 0px 4px;
  text-decoration: none;
  font-family: Calibri;
  font-variant: small-caps;
  color: crimson;
}
a:after {
  position: absolute;
  content: "|";
  padding: 0px 4px;
}
a:last-of-type:after {
  display: none;
}
<div id='Yellowcircle'>
  <div id='Bluesquare'>
    <div class='box'>
    </div>
  </div>
</div>

<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#'>Go back to default</a>

这就是我所说的标记在需要转换为超过 3 个形状时变得混乱的意思。请注意，我们必须如何为所需的每个额外形状引入额外级别。

.box {
  height: 150px;
  width: 150px;
  background-color: rgb(255, 0, 0);
  transition: all 0.5s linear;
}
#Yellowcircle:target .box {
  border-radius: 50%;
  background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
  background-color: rgb(0, 0, 255);
}
#Greenoval:target .box {
  border-radius: 75px 100px;
  background-color: rgb(0, 255, 0);
}
/* Just for demo */

a {
  position: relative;
  margin: 0px 4px;
  text-decoration: none;
  font-family: Calibri;
  font-variant: small-caps;
  color: crimson;
}
a:after {
  position: absolute;
  content: "|";
  padding: 0px 4px;
}
a:last-of-type:after {
  display: none;
}
<div id='Yellowcircle'>
  <div id='Bluesquare'>
    <div id='Greenoval'> <!-- notice how for each shape we need to add an extra level -->
      <div class='box'>
      </div>
    </div>
  </div>
</div>

<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#Greenoval'>Transform to green oval</a>
<a href='#'>Go back to default</a>

于 2013-09-26T13:24:34.840 回答