Как сделать чтобы карточка не разворачивалась при нажатии ссылки?

Question

[partyzanx]

Ссылка ----------->

<label class="card2 effect__check" for="one">
            <input type="checkbox" id="one"/>
            <div class="child">
                <div class="card__front block"> 
<span class="mb ch w">
<span class="w">我</span>
<span class="p1"> wǒ </span>
<span class="p2"> wɔ↝ </span>
<span class="p3"> wɔ3 </span> 
<img class="an" src="/Strokeorder/grammar_hsk1/3-1-0-9/wo3.gif">
<a class="sound" title="grammar_hsk1/3-1-0-9/ch/wo3.mp3"></a>
</span></div> 
                <div class="card__back block"> 
<span class="mb en w">
<span class="w">I</span>
<span class="tc">ˈaɪ</span>
<a class="sound" title="grammar_hsk1/3-1-0-9/en/I.mp3"></a>
</span></div> 
              </div>
          </label>

Как прописать в css, чтобы при нажатии на

<a class="sound" title="grammar_hsk1/3-1-0-9/ch/wo3.mp3"></a>

не происходил разворот карточки? Всё прописано на чисто ксс. Если добавить href="" внутрь ссылки, то разворота не происходит, но зато происходит перезагрузка страницы.

Answer 1

[Михаил]

Если вы не хотите js, то тут вам придется слегка переверстать, нужно ваш label обернуть в ещё один блок в котором будет label и ссылка. И ссылку чере absolute поставить в нужное место, таким образом нажатие на ссылку, не будет задействовать события checkbox

Comments

[partyzanx]

подскажите, пожалуйста, как быть с js?

[Михаил]

partyzanx,

function play(evt) {
   evt.preventDefault();
   evt.stopPropagation();
   let title = evt.target.title // из title
   player.src = `/sounds/${title}`
   player.play();
 }

И не используйте ссылки, используйте кнопки. Например так.

<button type="button" data-src="ссылка на файл"></button>

[partyzanx]

Михаил, спасибо большое!

Answer 2

[Василий Черненков]

Это скорее НЕ в стилях а в скриптах
Нужной найти скрипт который отвечает за разворот и в нем уточнить чтоб он срабатывал только в том случае если элемент по которому совершен клик - НЕ является указанной ссылкой

Comments

[partyzanx]

на чистом css написано)

[partyzanx]

Михаил, подскажите, пожалуйста, как быть с js?