Menü alt elemanı üzerine gelince resim değişmesi

dgknbzglu

Decapat
Katılım
5 Mart 2019
Mesajlar
880
Çözümler
12
Yer
İstanbul/Maltepe
CSS konusunda biraz eksiğim var ve bu konuda yardıma ihtiyacım var. Elimde şöyle bir menü var ve ben her alt elemanın üzerine geldiğimde sağ taraftaki resmin o elemana göre değişmesini istiyorum. Nasıl bir yol izlemeliyim?

1628236593903.png
 

mynespc

Picopat
Katılım
7 Şubat 2021
Mesajlar
394
Çözümler
1
CSS konusunda biraz eksiğim var ve bu konuda yardıma ihtiyacım var. Elimde şöyle bir menü var ve ben her alt elemanın üzerine geldiğimde sağ taraftaki resmin o elemana göre değişmesini istiyorum. Nasıl bir yol izlemeliyim?

Eki Görüntüle 1129451
E bu çok kolay
Öncelikle resimlere ID veya Class tanımıyorsunuz ve aşağıdaki gibi yazıyorsunuz.

Css:
a.anasayfayaDon {
  display: block;
  width: 80px;
  height: 80px;
  background: url(images/degisen_resim.gif) 0 0 no-repeat;
  text-decoration: none;
  text-indent:-999px;
}

a:hover.anasayfayaDon {
  background-position: -80px 0;
}
 
KS
KS
dgknbzglu

dgknbzglu

Decapat
Katılım
5 Mart 2019
Mesajlar
880
Çözümler
12
Yer
İstanbul/Maltepe
Kusura bakma anlayamadım ama kodlar bu şekilde, yardımcı olabilir misin? @mynespc

HTML:
<ul>
    <li class="megamenu submenu">
        <a href="javascript:void(0);" class="show-submenu-mega">Pages</a>
        <div class="menu-wrapper">
            <div class="row small-gutters">
                <div class="col-lg-3">
                    <h3>###</h3>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>

                    </ul>
                </div>

                <div class="col-lg-3 d-xl-block d-lg-block d-md-none d-sm-none d-none">
                    <div class="banner_menu">
                        <a href="#0">
                            <img src="img/banner_menu.jpg" width="400" height="550" alt="" class="img-fluid lazy">
                        </a>
                    </div>
                </div>
            </div>
            <!-- /row -->
        </div>
        <!-- /menu-wrapper -->
    </li>
</ul>
 
KS
KS
dgknbzglu

dgknbzglu

Decapat
Katılım
5 Mart 2019
Mesajlar
880
Çözümler
12
Yer
İstanbul/Maltepe
@dgknbzglu hocam şu video yardımcı olabilir.

Eğer yine yapamazsanız etiket atarsınız, müsait bir zamanda kodu yazıp atarım.
Ben de bu videoyu gördüm bi 15 dakika önce falan. Gelip buraya atayım da başkalarına yardımı dokunsun diyecektim ki atmışsın hocam. Teşekkür ederim alakan için :)
 
Yukarı