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;
}

しかし、別のボタンを押すと、同じ小さな円がブルースクエアにも変わります。

4

1 に答える 1

2

これは可能です。ただし、以下のコードに示すように、HTML でネストする必要があります。同じものを2 ～ 3 回以上変換する必要がある場合は、マークアップが乱雑になるため、この方法は使用しないでください。基本的に、ここで行っていることは次のとおりです。div

  1. 変換される要素はdivwith クラス asboxです。しかし、それがどのように、そして何に変換されるかは、クリックされたリンクと関連付けられたターゲットによって異なります。
  2. 1つ目のリンクをクリックすると、一番外側divにYellowcircleあるのが対象です。CSS に従って、 class を持つ要素は、がboxの場合に黄色の円に変換されます。targetYellowcircle
  3. 2 番目のリンクをクリックすると、Bluesquarediv が になり、targetCSS に従って、この場合はboxが青い四角になるはずです。
  4. 最後に 3 番目のリンクをクリックすると、ターゲットは general#になるため、デフォルトの.boxCSS スタイルが適用され、赤い四角に戻ります。

他の方法もありますが、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 に答える