CSS hover yönetimi yardım

Question

Arkadaşlar merhaba, iyi forumlar

Bir tasarımda hover yönetimi konusunda bir noktada takıldım daha önceden hiç yaptığım bir uygulama değil düşündüğüm şey olur mu olmaz mı bilmiyorum ama aşağıdaki görselde ki gibi bir divim var resim ve h etiketi ayrı bir class ta button bölümü ise bu class ın dışarısında her iki bölümde de farklı hover özelliği mevcut sadece button clasına gelince üst taraftaki classın hover bölümünü de çalıştırsın istiyorum böyle birşey mümkün müdür bilgisi olan arkadaşlar yardımcı olabilir mi ?

thealiyasar · Answer

Detaylı İnceleye geldiği zaman div'in hover'ı mı tetiklensin istiyorsunuz ben çok kavrayamadım

s_akarisik · Answer

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

@kadirkilic; takılı kalmış sanırım quote+ kusura bakma arada senın postta kaynamış

.service sizin kapsayıcı alanınız. Bunun hover'ında tetiklenmesini istediklerinize şunu uygulayacaksınız.

.service:hover .baslik{}

.service:hover .yazi{}

.service:hover .buton{}

kapsayıcının sınırları içerisine girdiğinde mouse bu hover ayarlamaları ile neyin neye dönüşeceğini belirleyebilirsiniz.

Bu arada element ögesi parent tetikleyemez lakin parent içerisindeki bir elementi etkileyebilir. Aşağıdaki link son söylediğim şeye örnektir.

https://jsfiddle.net/onury/0un6k1jq/

kadirkilic · Answer

buttonun classını yazıp :hover yazıp devamınada etki edilmesi istediğiniz özelliğin classını yazınız hocer olduğunda o div çalısır

şöyle 
.button:hover  .container {}

s_akarisik · Answer

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

buttonun classını yazıp :hover yazıp devamınada etki edilmesi istediğiniz özelliğin classını yazınız hocer olduğunda o div çalısır

şöyle
.button:hover .container {}

şöyle
.button:hover .container {} 		Onu şekilde " .services .page-content .service button:hover .service-title a " denedim fakat sonuç alamadım. Bu şekilde button kısmının hover özelliğinide öldürüyor.

kadirkilic · Answer

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

Yardımınız için çok teşekkürler hocam. Sorun hallolmuş oldu biraz zorlasada

Bu geri dönüşünüzü kayda alıp gösteri yapmam gerekiyor hocam biraz daha afilli cümleler kurun.

Yardımcı olduysam, fikir verebildiysen ne mutlu bana. Kolay gelsin.

s_akarisik · Answer

.services .page-content .service-title a {
    -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      color: var(--text-color);
      transition: 0.7s;
}

.services .page-content .service-title a:hover {
    -webkit-filter: none;
      filter: none;
      color: var(--main-color);
      transition: 0.7s;
}

.services .page-content .service button {
    color: var(--text-color);
    background: no-repeat;
    border: 1px solid var(--text-color);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    margin-bottom: 100px;
    transition: 0.7s;
}

.services .page-content .service button:hover {
    color: var(--text-white);
    background-color: var(--main-color);
    transition: 0.7s;
    border: 1px solid var(--main-color);
}resim ve h etiketi service-title class ının içerisinde button ise class dışında

kadirkilic · Answer

s_akarisik adlı üyeden alıntı:						mesajı görüntüle									.services .page-content .service-title a {
    -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      color: var(--text-color);
      transition: 0.7s;
}

.services .page-content .service-title a:hover {
    -webkit-filter: none;
      filter: none;
      color: var(--main-color);
      transition: 0.7s;
}

.services .page-content .service button {
    color: var(--text-color);
    background: no-repeat;
    border: 1px solid var(--text-color);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    margin-bottom: 100px;
    transition: 0.7s;
}

.services .page-content .service button:hover {
    color: var(--text-white);
    background-color: var(--main-color);
    transition: 0.7s;
    border: 1px solid var(--main-color);
}resim ve h etiketi service-title class ının içerisinde button ise class dışında 		hocam css kodunuzu ne yapacağım html iletin

s_akarisik · Answer

Sosyal Medya Yönetimi

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

thealiyasar · Answer

arkadaşın istediği şey a :hover etkinliği kazandığında komple kapsayıcı div ve içerisindeki diğer ögelerinde hover etkinliği kazanması.

Css tekniğinde alt elemanın hover'ı kapsayıcı eleman ile birleştirilemez. Ya kapsayıcıya bir hover niteliği tanımlayıp içerisindekileri tetikleyeceksiniz yada bunu js yardımı ile yapacaksınız.

s_akarisik · Answer

thealiyasar adlı üyeden alıntı:						mesajı görüntüle									arkadaşın istediği şey a :hover etkinliği kazandığında komple kapsayıcı div ve içerisindeki diğer ögelerinde hover etkinliği kazanması.

Css tekniğinde alt elemanın hover'ı kapsayıcı eleman ile birleştirilemez. Ya kapsayıcıya bir hover niteliği tanımlayıp içerisindekileri tetikleyeceksiniz yada bunu js yardımı ile yapacaksınız. 		Hocam "Ya kapsayıcıya bir hover niteliği tanımlayıp içerisindekileri tetikleyeceksiniz"  şu kısmı yapmam nasıl bir kod yapısı kullanmam gerekli peki?

thealiyasar · Answer

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

buttonun classını yazıp :hover yazıp devamınada etki edilmesi istediğiniz özelliğin classını yazınız hocer olduğunda o div çalısır

şöyle
.button:hover .container {}

şöyle
.button:hover .container {} 		@kadirkilic;  takılı kalmış sanırım quote+ kusura bakma arada senın postta kaynamış
						s_akarisik adlı üyeden alıntı:						mesajı görüntüle									Hocam "Ya kapsayıcıya bir hover niteliği tanımlayıp içerisindekileri tetikleyeceksiniz" şu kısmı yapmam nasıl bir kod yapısı kullanmam gerekli peki? 		.service sizin kapsayıcı alanınız. Bunun hover'ında tetiklenmesini istediklerinize şunu uygulayacaksınız.

.service:hover .baslik{}

.service:hover .yazi{}

.service:hover .buton{}

kapsayıcının sınırları içerisine girdiğinde mouse bu hover ayarlamaları ile neyin neye dönüşeceğini belirleyebilirsiniz.

Bu arada element ögesi parent tetikleyemez lakin parent içerisindeki bir elementi etkileyebilir. Aşağıdaki link son söylediğim şeye örnektir.

https://jsfiddle.net/onury/0un6k1jq/

s_akarisik · Answer

thealiyasar adlı üyeden alıntı:						mesajı görüntüle									@kadirkilic; takılı kalmış sanırım quote+ kusura bakma arada senın postta kaynamış

.service sizin kapsayıcı alanınız. Bunun hover'ında tetiklenmesini istediklerinize şunu uygulayacaksınız.

.service:hover .baslik{}

.service:hover .yazi{}

.service:hover .buton{}

kapsayıcının sınırları içerisine girdiğinde mouse bu hover ayarlamaları ile neyin neye dönüşeceğini belirleyebilirsiniz.

Bu arada element ögesi parent tetikleyemez lakin parent içerisindeki bir elementi etkileyebilir. Aşağıdaki link son söylediğim şeye örnektir.

https://jsfiddle.net/onury/0un6k1jq/ 		Yardımınız için çok teşekkürler hocam. Sorun hallolmuş oldu biraz zorlasada

thealiyasar · Answer

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

Yardımınız için çok teşekkürler hocam. Sorun hallolmuş oldu biraz zorlasada

Bu geri dönüşünüzü kayda alıp gösteri yapmam gerekiyor hocam biraz daha afilli cümleler kurun.

Yardımcı olduysam, fikir verebildiysen ne mutlu bana. Kolay gelsin.

mehmetpekcan · Answer

thealiyasar adlı üyeden alıntı:						mesajı görüntüle									arkadaşın istediği şey a :hover etkinliği kazandığında komple kapsayıcı div ve içerisindeki diğer ögelerinde hover etkinliği kazanması.

Css tekniğinde alt elemanın hover'ı kapsayıcı eleman ile birleştirilemez. Ya kapsayıcıya bir hover niteliği tanımlayıp içerisindekileri tetikleyeceksiniz yada bunu js yardımı ile yapacaksınız. 		Burada son cümlenize ufak bir düzeltme yapmak istiyorum. Wrapper elementler'i altında ki child'ın belirli bi durumuna göre seçebiliyoruz. `:has` selector'u bu işe yarıyor. Örnek fiddle'ı aşağıya bırakıyorum.

.service:has(button:hover) {
  background: red;
}https://jsfiddle.net/k5gyvm97/2/

Not:
`:has` selector'unun browser desteklerine bakıp kullanımına karar verilmeli
https://caniuse.com/css-has

Ayrıca browser desteğini 100% yapabilmek adına polyfill kullanılabilir
https://www.npmjs.com/package/css-has-pseudo