[Rails]タブの作成でのhoverが作用しない

Question

前提・実現したいこと

railsでのアプリ開発にてhoverをscssで用いて動的な表現をしたい箇所があるが反映されない。

該当のソースコード

%section.mypage-main
  %h2.mypage-main__mypage-main-header
  .mypage-main__mypage-main-tabs
    %input#sold{checked: "checked", class: "mypage-main__mypage-main-tabs__tab-item", type: "radio"}/
    %label.tab-item{for: "all"} 購入した商品
    %input#purchased{class: "mypage-main__mypage-main-tabs__tab-item", type: "radio"}/
    %label.tab-item{for: "programming"} 出品した商品
  #sold.mypage-main__tab-content
    .mypage-main__tab-content__description
      %p.c-txtsp 
  #purchased.mypage-main__tab-content
    .mypage-main__tab-content__description
      %p.c-txtsp 

a:hover {
	color: indianRed;
	text-decoration: inherit;
}

.tab-item{
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 1;
}


.wrapper{
  height: 100%;
  width: 1020px;
  background-color: rgb(226, 243, 247);
  &__body{
    display: flex;
    justify-content: space-around;
    margin: 40px auto 0px;
    .mypage-side{
      width: 240px;
      margin: 0px 40px 0px 0px;
      &__mypage-nav{
        &__mypage-nav-head{
          margin: 40px 0px 0px;
        }
        &__mypage-nav-list{
          margin: 8px 0px 0px;
          &__mypage-nav-item{
            position: relative;
            display: block;
            padding: 16px;
            background: #fff;
            font-size: 14px;
            text-decoration: none;
          }
        }
      }
    }
    .mypage-main{
      &__mypage-main-tabs{
        margin-top: 50px;
        padding-bottom: 40px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 700px;
        margin: 0 auto;
        input{
          display: none;
        }
      }
    }
  }
}

試したこと

hoverの導入は初めてだったので↓のサイトを参考にさせていただきました。
https://bagelee.com/design/css/create_tabs_using_only_css/

補足情報（FW/ツールのバージョンなど）

Comments

[hoshi-takanori]

もしかして、.tab_item:hover { じゃなくて .tab-item:hover { なのでは。（_ じゃなくて -）

[macchan]

ご回答ありがとうございます。
実は別のところで解決しておりましてここで質問を投稿していたこと忘れておりました。
tab-itemのところもcssがあたっていなかったので修正をしました。

Answer 1

#sold:checked ~ #sold_content,
    #purchased:checked ~ #purchased_content{
      display: block;
  }

上記のように記述したところ解決しました。