BG Development


  Reply to this topicStart new topicStart Poll

> Целият DIV да е link, Как?
elanmorin
Публикувано на: 02-11-2016, 22:17
Quote Post



Име:
Група: Потребител
Ранг: Посетител

Мнения: 122
Регистриран на: 17.03.11



Ясно ми е, че кода ми е малко омазан.
Див в ховър ефект, обаче span и <h> не реагират на клик

Кода в css e:
CODE
.deffgall-da {
   display:block;
      margin: auto;
 
   width: 173px;
   height: 101px;
   position: relative;
   float: left;
   cursor: pointer;
   overflow: hidden;


      }
      
      .deffgall-da img {  
   position: absolute;  
   left: 0;  
   -webkit-transition: all 300ms ease-out;  
   -moz-transition: all 300ms ease-out;  
   -o-transition: all 300ms ease-out;  
   -ms-transition: all 300ms ease-out;  
   transition: all 300ms ease-out;
      margin-top:2px;
      display:block;
}  


.deffgall-da .caption {  
   font-family: Tahoma;
   font-size: 10px;
   background-color:#1c1c1c;  
   position: absolute;  
   color: #fff;  
   z-index: 100;  
   -webkit-transition: all 300ms ease-out;  
   -moz-transition: all 300ms ease-out;  
   -o-transition: all 300ms ease-out;  
   -ms-transition: all 300ms ease-out;  
   transition: all 300ms ease-out;  
   left: 0;  
   opacity: 0;  
   width: 165px;  
   height: 33px;  
   text-align: center;  
   padding: 15px;
      margin-left:4px;
      border:#FFF;
      border-bottom:solid;
      border-top:solid;
      border-width: 1px;
      display:block;
}  

.deffgall-da:hover .fade-caption {  
   opacity: 0.8;
      margin-top:60px;
      display:block;
}

В PHP файла е:
CODE
<div class="deffgall-da"><a href="http://deffnews.xyz/?p=1127 style="display:block">
<img src="http://deffnews.xyz/wp-content/uploads/2016/11/digital-art-1.jpg" /></a><span class="caption fade-caption">  
       <h3>DIGITAL ART</h3>  
      </span>  </div>

За това става въпрос, скрулнете най-долу

Това мнение е било редактирано от elanmorin на 02-11-2016, 22:24


--------------------
PMEmail Poster
Top
noxvy
Публикувано на: 02-11-2016, 22:30
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 1
Регистриран на: 17.08.16



CODE
<a href="http://deffnews.xyz/?p=1127 style="display:block">

не си затворил href атрибута
трябва да е:
CODE
<a href="http://deffnews.xyz/?p=1127" style="display:block">
PMEmail Poster
Top
elanmorin
Публикувано на: 03-11-2016, 09:48
Quote Post



Име:
Група: Потребител
Ранг: Посетител

Мнения: 122
Регистриран на: 17.03.11



Не е от това, само картинката действа, като линк. Текста не...

п.п. Оправих го.

Това мнение е било редактирано от elanmorin на 03-11-2016, 10:19


--------------------
PMEmail Poster
Top
frozener
Публикувано на: 03-11-2016, 16:13
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 941
Регистриран на: 30.01.11



QUOTE (elanmorin @ 03-11-2016, 09:48)
Не е от това, само картинката действа, като линк. Текста не...

п.п. Оправих го.

Еми защото не си поставил заглавието и спана в линк тоесто вътре в а таг.
PMEmail Poster
Top
elanmorin
Публикувано на: 03-11-2016, 19:26
Quote Post



Име:
Група: Потребител
Ранг: Посетител

Мнения: 122
Регистриран на: 17.03.11



QUOTE (frozener @ 03-11-2016, 16:13)
QUOTE (elanmorin @ 03-11-2016, 09:48)
Не е от това, само картинката действа, като линк. Текста не...

п.п. Оправих го.

Еми защото не си поставил заглавието и спана в линк тоесто вътре в а таг.

И това не беше, просто тоя готов код който използвах и човъркнах.
Кода е от Тук ,
ама като го почовърках се получи друг интересен ефект. Не е от затварянето на линка. Проработи нормално като сложих img linka в Css, не в html-a..


--------------------
PMEmail Poster
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0