Şimdi Ara

Position Değerinin Diğer Özellikleri Devre Dışı Bırakması

Bu Konudaki Kullanıcılar:
1 Misafir - 1 Masaüstü
5 sn
3
Cevap
0
Favori
247
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • Ana div'e position:relative verdim, input'lara da position:absolute; z-index:-1 verdim. Fakat şöyle bir sorun oluşuyor; input'lara verdiğim geçiş değerleri çalışmıyor. Çalışması için ne yapabilirim?

     
    <div class="hizmetler">
    <div class="hizmetler_baslik">
    <div class="hizmetler_icerik"> <img src="img/kucuk-logo.png" width="214" height="35" />'in size sunduğu hizmetler burada </div>
    </div>
    <div class="hizmet_liste">
    <input type="button" />
    <input type="button" />
    <input type="button" />
    <input type="button" />
    <input type="button" />
    </div>
    </div>
    /*=================================*/
    /*==========CSS BAŞLANGIÇ==========*/
    /*=================================*/

    .hizmetler {
    width: 100%;
    height: 319px;
    position: relative;
    }
    .hizmetler_baslik {
    width: 100%;
    height: 45px;
    text-align: center;
    background-color: #CCC;
    display: table;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    }
    .hizmetler_icerik {
    display: table-cell;
    vertical-align: middle;
    }
    .hizmet_liste {
    }
    .hizmet_liste input {
    width: 317px;
    height: 275px;
    background: none;
    border: 0;
    outline: none;
    position: absolute;
    z-index: -1;
    transition: All 1s ease;
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transform: scale(1);
    }
    .hizmet_liste input:nth-child(1) {
    background: url(../img/foto-1.png) no-repeat;
    }
    .hizmet_liste input:nth-child(1):focus {
    background: url(../img/foto-1-focus.png) no-repeat;
    transform: scale(1.300);
    }
    .hizmet_liste input:nth-child(2) {
    background: url(../img/foto-2.png) no-repeat;
    margin-left:160px;
    }
    .hizmet_liste input:nth-child(2):focus {
    background: url(../img/foto-2-focus.png) no-repeat;
    transform: scale(1.300);
    }
    .hizmet_liste input:nth-child(3) {
    background: url(../img/foto-3.png) no-repeat;
    margin-left:320px;
    }
    .hizmet_liste input:nth-child(3):focus {
    background: url(../img/foto-3-focus.png) no-repeat;
    transform: scale(1.300);
    }







  • position:absolute neden kullanıyosun ? yani zoraki bir durum mu ? position:absolute zorunlu olmadıkça kullanılan bir tanımlama değil. Geçiş değerleri dediğin degrademi yoksa hover tanımlaması mı ? Anladığım şeyse;

    normal değere bunu :transition:background .5s ease-in;
    hover'a bunu : background:red;

    yukarıda ki kodlarla dene birde focus yerine hover yaz.
  • ApeXiRubbEr kullanıcısına yanıt
    Teşekkür ederim çok basit bir yoldan durumu düzelttim.
  • 
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.