Екі фотосурет бір-біріне орналастырылған. Жылжытуда біреуін көрсетіңіз. Css немесе тек javascript көмегімен мүмкін бе?

Не істегіңіз келетіні - сүйреуге арналған жоғарғы фотосуретті көрсету (ол көріну мүмкіндігі: жасырын). Менің бір-біріңе мына екі сурет бар:

<div class="frame">
Title Here 
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>

Екінші суретті CSS арқылы қосқан:

.boxwrapper {
 background: url("../img/boxPlus.gif"); 
 position: relative;
 width: 300px;
 height: 178px;
 left: -6px;
 top: -184px;
 z-index: 1000;
}

Css көмегімен жасауға болады ма? Қайталанған (және бірнеше басқа нұсқалар):

 #frame img:hover .boxwrapper {
      visibility: visible;
    }

Бірақ бұл жұмыс істемейді. Немесе бұл JavaScript арқылы ғана мүмкін бе? Егер иә болса, бірнеше ұсыныс беріңіз, себебі менде JavaScript жігіт көп емес. Рахмет!

1

2 жауаптар

Сізге мынаны қою керек: сыныпты ата-аналық контейнерге апарыңыз. CSS осындай нәрселерді ағаштың «жоғары» деңгейін төмендетуге мүмкіндік бермейді, тек төмен.

.boxwrapper {
    display: none;
}

.frame:hover .boxwrapper {
    display: block;
}
2
қосылды

You could set the photo as background of the boxwrapper

.boxwrapper{
  background: url("../img/boxPlus.gif");
}

.boxwrapper:hover{
  background: url("../img/portfolio/default1.jpg");
}

егер бұл мүмкін болмаса, оны html ішіндегі стиль атрибуты арқылы өң ретінде қосуға болады

<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div> 
2
қосылды
рахмет. Көмектесті.
қосылды автор user1016695, көзі