77358


題の通りです．hrefで指定したURLに要素をクリックしたら飛ぶようにしたいのですが，良い方法が見つかりません．

<https://codepen.io/matsubax/pen/yLMKRmX>

[code]

    body {
        text-align: center;
        background-color: #D7FFD7;
      }
      
      #menu {
        width: 150px;
        height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -75px 0 0 -75px;
        list-style: none;
        font-size: 200%;
      }
      
      .menu-button {
        opacity: 0;
        z-index: -1;
      }
      
      .menu-button {
        width: 140px;
        height: 140px;
        position: absolute;
        left: 40%;
        top: 40%;
        margin: -50px 0 0 -50px;
        border-radius: 0%;
        background: #424242;
        background-size: 100%;
        overflow: hidden;
        text-decoration: none;
        background-image: url("../img/plp_logo.png")
      }
      
      #menu:not(:target) > a:first-of-type,
      #menu:target > a:last-of-type {
        opacity: 1;
        z-index: 1;
      }
      
      #menu:not(:target) > .icon-plus:before,
      #menu:target > .icon-minus:before {
        opacity: 1;
      }
      
      .menu-item {
        width: 140px;
        height:  140px;
        position: absolute;
        left: 40%;
        line-height: 5px;
        top: 40%;
        margin: -50px 0 0 -50px;
        border-radius: 0%;
        background-color: #424242;
        transform: translate(0px, 0px);
        transition: transform 500ms;
        z-index: -2;
        transition: 0.5s;
      }
      
      .menu-item:hover {
        opacity: 0.5;
      }
      
      .menu-item a {
        color: #fff;
        position: relative;
        top: 30%;
        left: 0;
        text-decoration: none;
      }
      
      #menu:target > .menu-item:nth-child(3) {
        transform: rotate(36deg) translateY(-300px) rotate(-360deg) ;
        transition-delay: 0.2s;
        background-image: url("../img/menu/01.png");
        background-size: cover;
      }
    
      img {
        display: block;
      }
[/code]

[code]

    <div class="container">
      <ul id="menu">
        <a class="menu-button icon-plus" href="#menu"></a>
        <a class="menu-button icon-minus" href="#0"></a>
    
        <li class="menu-item">
          <a href="https://google.com"></a>
        </li>
      </ul>
    </div>
[/code]

お手数おかけしますが，上記のURLに実装コードが書いてあるので，見ていただけたらと思います．

中央の四角をクリックしますと，別の要素が出てくると思いますがその要素をクリックして特定のページに遷移させたいのですが，うまくいきません．

anchorタグにテキストを設定すれば遷移はうまくいくのですが，文字は入力したくないため使用しない予定です．また，srcを指定して画像を挿入すると同様にうまく遷移するのですが，cssのハイライトと画像がずれてしまうのでこちらも使用を控えたいと考えております．なるべくcss上でbackgroud-
imageを指定し，クリックしたら特定のページに遷移したいと考えているのですが，思いつかず質問させていただきました．

何かしらヒントをいただけないでしょうか．よろしくお願い致します．


CC BY-SA 4.0
2021-06-04T14:10:23.327
77342
2021-06-05T15:39:09.393
2021-06-05T15:39:09.393
3068
46665
question
html css
transformした要素内のanchorタグをクリックしたら特定のページに遷移したい


aタグを同四角形と同じ大きさにしてしまえば良いのではないでしょうか。

[code]

    .menu-item a {
      color: #fff;
      position: relative;
      width: 140px;            /* <-- 追加 */
      height: 140px;          /* <-- 追加 */
      display: inline-block;  /* <-- 追加 */
      text-decoration: none;
    }
    
[/code]

直接本質問とは関係ないかもしれないですが、下記を参考にしました。  
<https://stackoverflow.com/a/29667918/1979953>


CC BY-SA 4.0
2021-06-05T01:42:32.557
77343
2021-06-05T01:42:32.557
9008
77342
answer


javascriptで解決するといくつかの方法があるかと思いますが。  
今回の問題はcssとhtmlだけが前提でお答えします。  
ソースに見ると原因はクリックされている要素はanchorタグではなく、anchorの親要素のリストになっています。現時点anchorの表示状態はないのと同じで実際サイズはないですから。  
ランクは一つだけでしたらli要素を使わなくても大丈夫じゃないかと思います。  
そうしますと下記のような書き方はよろしいでしょうか。

[code]

          body {
            text-align: center;
            background-color: #d7ffd7;
          }
    
          #menu {
            width: 150px;
            height: 150px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -75px 0 0 -75px;
            list-style: none;
            font-size: 200%;
          }
    
          .menu-button {
            width: 140px;
            height: 140px;
            position: absolute;
            left: 40%;
            top: 40%;
            margin: -50px 0 0 -50px;
            border-radius: 0%;
            background: #424242;
            background-size: 100%;
            overflow: hidden;
            text-decoration: none;
            background-image: url("../img/plp_logo.png");
          }
    
          #menu:not(:target) > a:first-of-type,
          #menu:target > a:last-of-type {
            opacity: 1;
            z-index: 1;
          }
    
          #menu:not(:target) > .icon-plus:before,
          #menu:target > .icon-minus:before {
            opacity: 1;
          }
    
          .menu-item {
            width: 140px;
            height: 140px;
            position: absolute;
            left: 40%;
            line-height: 5px;
            top: 40%;
            margin: -50px 0 0 -50px;
            border-radius: 0%;
            background-color: #424242;
            transform: translate(0px, 0px);
            transition: transform 500ms;
            z-index: -2;
            transition: 0.5s;
          }
    
          .menu-item:hover {
            opacity: 0.5;
          }
    
          .menu-item a {
            color: #fff;
            position: relative;
            top: 30%;
            left: 0;
            text-decoration: none;
          }
    
          #menu:target > .menu-item:nth-child(3) {
            transform: rotate(36deg) translateY(-300px) rotate(-360deg);
            transition-delay: 0.2s;
            background-image: url("../img/menu/01.png");
            background-size: cover;
          }
    
          img {
            display: block;
          }
[/code]

[code]

      <body>
        <div class="container">
          <ul id="menu">
            <a class="menu-button icon-plus" href="#menu"></a>
            <a class="menu-button icon-minus" href="#0"></a>
            <a class="menu-item" href="https://google.com"></a>
          </ul>
        </div>
      </body>
[/code]


CC BY-SA 4.0
2021-06-05T14:01:01.673
77358
2021-06-05T14:18:05.820
2021-06-05T14:18:05.820
46691
46691
77342
answer