Bağlantıya (a href) Tıklandığında (div) Arkaplanı Değişsin İstiyorum?

28-07-2021, 22:37:56

Aşağıdaki görseldeki "EN" yazan bağlantıya tıklandığında yanındaki TR'nin arkaplan rengini beyaz yapmak istiyorum, bunu CSS ile yapmak mümkün mü? Değil ise JS kullanarak nasıl yapabilirim? Şöyle bir kod ile yapılıyor sanıyorum ama çalışmadı: .language-toggle a:focus + div {background: #fff;}

Site adresi: https://miyavliyo.com/ (kod header'da ekli durumda)

28-07-2021, 22:42:07

#2

NextWorld

CSS Focus ve active özelliklerini araştırabilirsiniz

28-07-2021, 22:46:32

#3

SkyGhostAir

NextWorld adlı üyeden alıntı: mesajı görüntüle

CSS Focus ve active özelliklerini araştırabilirsiniz

Yanlış anlaşıldım galiba hocam, active ile bağlantıya arkaplan verdim ama aynı şey olurken yanındaki "TR" yazan kutunun (div) arkaplan rengini silmek istiyorum. Yani şunun:

28-07-2021, 22:51:12

#4

ribrahimozer

active özelliğini araştırırken size denk geldim.

https://codex.dincmedya.com.tr/active-nasil-kullanilir/

28-07-2021, 22:51:39

#5

bgokcol

.language-toggle {direction:rtl!important}
.language-toggle a:focus ~ div {
    background: #fff !important;
    color: #000;
}

Önce bu CSS kodunu ekleyin, ardından HTML kodunu şunun yerine:
<div class="language-toggle"><div class="lang-btn-tr">TR</div> <a hreflang="en-US" lang="en-US" title="English US" href="https://miyavliyo.com/en/">EN</a></div>
şöyle ayarlayın:
<div class="language-toggle"><a hreflang="en-US" lang="en-US" title="English US" href="https://miyavliyo.com/en/">EN</a><div class="lang-btn-tr">TR</div></div>

28-07-2021, 22:51:52

#6

Caxing

Dediğiniz gibi olması için JS ile yapmanız lazım.

28-07-2021, 22:53:38

#7

ribrahimozer

https://stackoverflow.com/questions/...an-active-link

burada istediğini vermiş hocam

28-07-2021, 22:55:36

#8

bulentking

Bir class oluşturun, css de background atayın. Jquery ile söz konusu dive tıklandığında .addClass(Class-ismi) işlevini kullanın.

28-07-2021, 23:04:35

#9

SkyGhostAir

ribrahimozer adlı üyeden alıntı: mesajı görüntüle

active özelliğini araştırırken size denk geldim.

https://codex.dincmedya.com.tr/active-nasil-kullanilir/

Valla 5-6 yıllık yazı o hocam siteyi taşımıştım oraya kaldı öyle devamını getiremedim. Şöyle tüm CSS'ler için açıklayıcı içerikler yazacaktım vakit bulamadım: https://codex.dincmedya.com.tr/css-secicileri/

bgokcol adlı üyeden alıntı: mesajı görüntüle

.language-toggle {direction:rtl!important}
.language-toggle a:focus ~ div {
    background: #fff !important;
    color: #000;
}

Önce bu CSS kodunu ekleyin, ardından HTML kodunu şunun yerine:
<div class="language-toggle"><div class="lang-btn-tr">TR</div> <a hreflang="en-US" lang="en-US" title="English US" href="https://miyavliyo.com/en/">EN</a></div>
şöyle ayarlayın:
<div class="language-toggle"><a hreflang="en-US" lang="en-US" title="English US" href="https://miyavliyo.com/en/">EN</a><div class="lang-btn-tr">TR</div></div>

rtl ve ~ kullanımı mı, bilginin zeka ile buluşmuş hali 👍 Teşekkürler hocam bu işimi çözdü.