擬似要素の前にHTMLブロックを移動しないでください

これを見てみましょうDEMOここではカレンダーがあり、左から右に移動できます。このカレンダーは::before三角で移動しています。それは良い行動ではなく、私はそれを三角なしで移動したい。それは可能ですか？好ましくはjsなし。擬似要素の前にHTMLブロックを移動しないでください

$('[type="range"]').on('input change',() => { 
 
    $('.calendar').css('left', $('[type="range"]').val() + 'px'); 
 
})

.calendar { 
 
    position: absolute; 
 
    top: 70px; 
 
    left: 70px; 
 
    width: 200px; 
 
    border: 1px solid #ccc; 
 
    padding: 20px; 
 
} 
 

 
.calendar:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 200px; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 5px 10px 5px; 
 
    border-color: transparent transparent #ccc transparent; 
 
} 
 

 
.day { 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    border: 1px solid #aaa; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 30px; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="calendar"> 
 
    <div class="day">1</div> 
 
    <div class="day">2</div> 
 
    <div class="day">3</div> 
 
    <div class="day">4</div> 
 
    <div class="day">5</div> 
 
    <div class="day">6</div> 
 
    <div class="day">7</div> 
 
    <div class="day">8</div> 
 
    <div class="day">9</div> 
 
    <div class="day">10</div> 
 
</div> 
 

 
<input type="range", min="50", max="200", value="70">

出典

2016-09-06 Mike_Device

三角形を削除するか、三角形がその位置にある間にカレンダーを移動しますか？ – RicoBrassers

@RicoBrassersはい。三角形がその位置にとどまる間にカレンダーを移動する –

私はあなたのコードにいくつかの変更を加えました。それはうまくいくようです:)。

CSS：

.ct { 
    position: absolute; 
    top: 70px; 
    left: 70px; 
    width: 200px; 
} 
.calendar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    border: 1px solid #ccc; 
    padding: 20px; 
} 
.ct:before { 
    content: ""; 
    position: absolute; 
    top: -10px; 
    left: 200px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 5px 10px 5px; 
    border-color: transparent transparent #ccc transparent; 
} 

.day { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    border: 1px solid #aaa; 
    border-radius: 50%; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 30px; 
    margin: 5px; 
}

HTML：

<body> 
    <div class="ct"> 
    <div class="calendar"> 
     <div class="day">1</div> 
     <div class="day">2</div> 
     <div class="day">3</div> 
     <div class="day">4</div> 
     <div class="day">5</div> 
     <div class="day">6</div> 
     <div class="day">7</div> 
     <div class="day">8</div> 
     <div class="day">9</div> 
     <div class="day">10</div> 
    </div> 
    </div> 

    <input type="range", min="50", max="200", value="70"> 
</body>

Basicly、私は擬似セレクタを持つ親コンテナ（矢印）を追加しましたし、この1が動いていません。移動部分は暦のみです。

出典

2016-09-06 12:59:32

更新CSS

.calendar:before { 
     display:none; 
    }

矢印が非表示になり、これを追加します。または.calendar：beforeクラスを削除します。

出典

2016-09-06 11:23:44 Nayan

擬似要素の前にHTMLブロックを移動しないでください

答えて

関連する問題