сурет тегіне арналған апаратын қалай жасауға болады

Менде сілтеме ретінде жұмыс істейтін бірнеше суреттерім бар және оларға әуенді көрсетуді қалаймын, сондықтан оларда ойнату түймешігі пайда болады. Осыны жасау үшін, мен сыныпты жасадым және әуежайға арналған имм форматын бердім, бірақ ол жұмыс істемейді.

.img:hover {
background:url(http://i40.tinypic.com/i3s4dc.png);
}

Here is what I have done: http://jsfiddle.net/nkEpd/

2
мұнда төменде келтірілген шешімдерім бойынша скриптің жаңартуы - jsfiddle.net/nkEpd/30
қосылды автор lukeocom, көзі
мұнда төменде келтірілген шешімдерім бойынша скриптің жаңартуы - jsfiddle.net/nkEpd/30
қосылды автор lukeocom, көзі

14 жауаптар

Фон-кескінді суреттің тегіне қосуға болмайды, себебі көрінбейтін болады, себебі сіздің фоныңыздың үстінен салынған кескін бар.

Сіз не істеуді қаласаңыз - суреттің жоғарғы жағында екінші форматты қосып, фондық суретті көрсете аласыз.

Бұл сияқты html-ті қосуға болады:


    <div class="container">
         <div class="overlay"></div> </div> 

css:

.container{
    position:relative;
    width:184px;
    height:104px;
}
.img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;   
    z-index:100;
}

.overlay:hover{
     background:url(http://i40.tinypic.com/i3s4dc.png);
 }

Fiddle here: http://jsfiddle.net/nkEpd/13/

6
қосылды
+1, бірақ ескірген браузерлерде якорларға жақсы қолдау көрсетілетінін айтқым келеді, сондықтан тек қана якорларға арналған роллерлерді (мысалы: display: block; пішімделген якорь)
қосылды автор Frederik.L, көзі

Фон-кескінді суреттің тегіне қосуға болмайды, себебі көрінбейтін болады, себебі сіздің фоныңыздың үстінен салынған кескін бар.

Сіз не істеуді қаласаңыз - суреттің жоғарғы жағында екінші форматты қосып, фондық суретті көрсете аласыз.

Бұл сияқты html-ті қосуға болады:


    <div class="container">
         <div class="overlay"></div> </div> 

css:

.container{
    position:relative;
    width:184px;
    height:104px;
}
.img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;   
    z-index:100;
}

.overlay:hover{
     background:url(http://i40.tinypic.com/i3s4dc.png);
 }

Fiddle here: http://jsfiddle.net/nkEpd/13/

6
қосылды
+1, бірақ ескірген браузерлерде якорларға жақсы қолдау көрсетілетінін айтқым келеді, сондықтан тек қана якорларға арналған роллерлерді (мысалы: display: block; пішімделген якорь)
қосылды автор Frederik.L, көзі

Фон-кескінді суреттің тегіне қосуға болмайды, себебі көрінбейтін болады, себебі сіздің фоныңыздың үстінен салынған кескін бар.

Сіз не істеуді қаласаңыз - суреттің жоғарғы жағында екінші форматты қосып, фондық суретті көрсете аласыз.

Бұл сияқты html-ті қосуға болады:


    <div class="container">
         <div class="overlay"></div> </div> 

css:

.container{
    position:relative;
    width:184px;
    height:104px;
}
.img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;   
    z-index:100;
}

.overlay:hover{
     background:url(http://i40.tinypic.com/i3s4dc.png);
 }

Fiddle here: http://jsfiddle.net/nkEpd/13/

6
қосылды
+1, бірақ ескірген браузерлерде якорларға жақсы қолдау көрсетілетінін айтқым келеді, сондықтан тек қана якорларға арналған роллерлерді (мысалы: display: block; пішімделген якорь)
қосылды автор Frederik.L, көзі

Менде әдіс бар:

http://jsfiddle.net/nkEpd/28/

HTML


    

CSS

a.gallerypic{
  position:relative;
  display:block;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:0%;
  top:15%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -kHTML-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}
3
қосылды

Менде әдіс бар:

http://jsfiddle.net/nkEpd/28/

HTML


    

CSS

a.gallerypic{
  position:relative;
  display:block;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:0%;
  top:15%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -kHTML-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}
3
қосылды

Оны JS жоқ шешуге тырысты және ешқандай қосымша белгілеу. Міне, менің шешімім псевдос элементін якорь тегіне қосып, ол жалған элемент фоны көрсетілген кезде көрінеді. Сіз өзіңіздің биіктігіңізді тиісті өлшемдерге ие болу үшін «ойнату» батырмасының биіктігіне қарай бейімдеуіңіз керек.

http://jsfiddle.net/gleezer/jmXdh/1/

HTML сиқырлы сияқты бірдей қалады, ешқандай қосымша элементтер жоқ, CSS келесідей:

a{
position: relative;
}

a:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
height: 100px;
position: absolute;
left: 0;
}
2
қосылды
Рахмет, сіздің шешіміңіз - ең қарапайым.
қосылды автор Alex Jj, көзі

Оны JS жоқ шешуге тырысты және ешқандай қосымша белгілеу. Міне, менің шешімім псевдос элементін якорь тегіне қосып, ол жалған элемент фоны көрсетілген кезде көрінеді. Сіз өзіңіздің биіктігіңізді тиісті өлшемдерге ие болу үшін «ойнату» батырмасының биіктігіне қарай бейімдеуіңіз керек.

http://jsfiddle.net/gleezer/jmXdh/1/

HTML сиқырлы сияқты бірдей қалады, ешқандай қосымша элементтер жоқ, CSS келесідей:

a{
position: relative;
}

a:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
height: 100px;
position: absolute;
left: 0;
}
2
қосылды
Рахмет, сіздің шешіміңіз - ең қарапайым.
қосылды автор Alex Jj, көзі

Maybe something as simple as THIS


     

Only thing you need to do, it to use the same image with play button on it as a second image.

1
қосылды

Maybe something as simple as THIS


     

Only thing you need to do, it to use the same image with play button on it as a second image.

1
қосылды

Қолдану арқылы апаратын суретті өзгерте аласыз

img:hover{content:url("hoverimg.jpg");}

Сіздің басқа опцияңыз - суретке үстіңгі қабатта болу және оны сүйреуге арналған фон-кескінді қолдану. Жатакхана негізгі суретті жабу үшін мүлдем орналасуы керек.

#blanket{position:absolute;top:0;bottom:0;left:0;right:0;}
#blanket:hover{background-image:url('hoverimg.jpg');}

here's an update of your fiddle http://jsfiddle.net/nkEpd/30/

1
қосылды

Қолдану арқылы апаратын суретті өзгерте аласыз

img:hover{content:url("hoverimg.jpg");}

Сіздің басқа опцияңыз - суретке үстіңгі қабатта болу және оны сүйреуге арналған фон-кескінді қолдану. Жатакхана негізгі суретті жабу үшін мүлдем орналасуы керек.

#blanket{position:absolute;top:0;bottom:0;left:0;right:0;}
#blanket:hover{background-image:url('hoverimg.jpg');}

here's an update of your fiddle http://jsfiddle.net/nkEpd/30/

1
қосылды

мына әрекетті орындаңыз:

a{
display:block;
    width:184px;
    height: 104px;


}
a:hover {
    background:url(http://h.hiphotos.baidu.com/album/w%3D310%3Bq%3D75/sign=4e5a4bd9b219ebc4c0787098b21dbec1/adaf2edda3cc7cd9ba7b40653801213fb80e9133.jpg);
  background-size: 100%;

}

a:hover .img {
    display: none;
}

demo бөлімін қараңыз.

1
қосылды

мына әрекетті орындаңыз:

a{
display:block;
    width:184px;
    height: 104px;


}
a:hover {
    background:url(http://h.hiphotos.baidu.com/album/w%3D310%3Bq%3D75/sign=4e5a4bd9b219ebc4c0787098b21dbec1/adaf2edda3cc7cd9ba7b40653801213fb80e9133.jpg);
  background-size: 100%;

}

a:hover .img {
    display: none;
}

demo бөлімін қараңыз.

1
қосылды

мына әрекетті орындаңыз:

a{
display:block;
    width:184px;
    height: 104px;


}
a:hover {
    background:url(http://h.hiphotos.baidu.com/album/w%3D310%3Bq%3D75/sign=4e5a4bd9b219ebc4c0787098b21dbec1/adaf2edda3cc7cd9ba7b40653801213fb80e9133.jpg);
  background-size: 100%;

}

a:hover .img {
    display: none;
}

demo бөлімін қараңыз.

1
қосылды