悬停具有悬停效果的图像并在另一个图像中显示文本 div
hover an image that has a hover effect and also show text in another div
我有 4 张图像(responsive/collapsing 到 2 和到 1)具有悬停效果并应用了 link。在它们下面应该有一个 div (或替代解决方案),当鼠标悬停在特定图像上时,它会显示对每个图像的描述。所以 4 个图像有 4 个不同的文本,我非常想保持悬停效果。
到目前为止我为我工作的代码是:
<div class="wrapper grid4">
<div id="werk-1">
<article class="col">
<div class= "hover"><a href="VREESMACHINE.html"><img src="afbeeldingen/vreesmachine-330px.jpg" width="100%" /></a></div>
</article>
<article class="col">
<div class= "hover"><a href="PRINTWERK.html"><img src="afbeeldingen/ted-330px.jpg" width="100%" /></a></div>
</article>
<article class="col">
<div class= "hover"><a href="TEKENINGEN.html"><img src="afbeeldingen/grootel-330.jpg" width="100%" /></a></div>
</article>
<article class="col">
<div class= "hover"><a href="BOEKEN.html"><img src="afbeeldingen/haai-330px.jpg" width="100%" /></a></div>
</article>
<div>
<div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div>
</div>
</div>
</div>
如果我正确理解你的问题:
每张图片都有一些描述,悬停时它会获取该描述文本并将其显示在您的 'grafischewerktekst' class.
HTML:
<div class="wrapper grid4">
<div id="werk-1" style="width: 400px;">
<article class="col">
<div class= "hover"><a href="VREESMACHINE.html"><img src="afbeeldingen/vreesmachine-330px.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 1</div>
</div>
</article>
<article class="col">
<div class= "hover"><a href="PRINTWERK.html"><img src="afbeeldingen/ted-330px.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 2</div>
</div>
</article>
<article class="col">
<div class= "hover"><a href="TEKENINGEN.html"><img src="afbeeldingen/grootel-330.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 3</div>
</div>
</article>
<article class="col">
<div class= "hover"><a href="BOEKEN.html"><img src="afbeeldingen/haai-330px.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 4</div>
</div>
</article>
<div><div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div></div>
</div>
</div>
JS:
$('.hover').hover(function(){
$('.grafischewerktekst').html($(this).find('.description').html());
}, function(){
$('.grafischewerktekst').html('');
});
为每篇文章添加一个 data-*
属性 class .col
和一个 mouseover
事件来改变 .grafischewerktekst
[=32] 的文本=] 到 data-*
中的那个
$('.col').on('mouseover',function()
{
$('.grafischewerktekst').text($(this).attr('data-desc'))
});
img{
width:100px;
height:100px;
float:left;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper grid4">
<div id="werk-1">
<article class="col" data-desc="Image 1 description"><!--add your image description to data-desc-->
<div class= "hover"><a href="VREESMACHINE.html"><img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg" width="100%" /></a></div>
</article>
<article class="col" data-desc="Image 2 description">
<div class= "hover"><a href="PRINTWERK.html"><img src="http://i.dailymail.co.uk/i/pix/2015/01/06/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg" width="100%" /></a></div>
</article>
<article class="col" data-desc="Image 3 description">
<div class= "hover"><a href="TEKENINGEN.html"><img src="http://i.telegraph.co.uk/multimedia/archive/03025/saatchi-plug-hole_3025834k.jpg" width="100%" /></a></div>
</article>
<article class="col" data-desc="Image 4 description">
<div class= "hover"><a href="BOEKEN.html"><img src="http://1.bp.blogspot.com/-MHxFnsPcldo/T6wD3La83DI/AAAAAAAAGSI/W9KKoTN2NVk/s1600/anaconda-Python-1.jpg" width="100%" /></a></div>
</article>
<div>
<div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div>
</div>
</div>
</div>
我有 4 张图像(responsive/collapsing 到 2 和到 1)具有悬停效果并应用了 link。在它们下面应该有一个 div (或替代解决方案),当鼠标悬停在特定图像上时,它会显示对每个图像的描述。所以 4 个图像有 4 个不同的文本,我非常想保持悬停效果。
到目前为止我为我工作的代码是:
<div class="wrapper grid4">
<div id="werk-1">
<article class="col">
<div class= "hover"><a href="VREESMACHINE.html"><img src="afbeeldingen/vreesmachine-330px.jpg" width="100%" /></a></div>
</article>
<article class="col">
<div class= "hover"><a href="PRINTWERK.html"><img src="afbeeldingen/ted-330px.jpg" width="100%" /></a></div>
</article>
<article class="col">
<div class= "hover"><a href="TEKENINGEN.html"><img src="afbeeldingen/grootel-330.jpg" width="100%" /></a></div>
</article>
<article class="col">
<div class= "hover"><a href="BOEKEN.html"><img src="afbeeldingen/haai-330px.jpg" width="100%" /></a></div>
</article>
<div>
<div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div>
</div>
</div>
</div>
如果我正确理解你的问题:
每张图片都有一些描述,悬停时它会获取该描述文本并将其显示在您的 'grafischewerktekst' class.
HTML:
<div class="wrapper grid4">
<div id="werk-1" style="width: 400px;">
<article class="col">
<div class= "hover"><a href="VREESMACHINE.html"><img src="afbeeldingen/vreesmachine-330px.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 1</div>
</div>
</article>
<article class="col">
<div class= "hover"><a href="PRINTWERK.html"><img src="afbeeldingen/ted-330px.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 2</div>
</div>
</article>
<article class="col">
<div class= "hover"><a href="TEKENINGEN.html"><img src="afbeeldingen/grootel-330.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 3</div>
</div>
</article>
<article class="col">
<div class= "hover"><a href="BOEKEN.html"><img src="afbeeldingen/haai-330px.jpg" width="100%" /></a>
<div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 4</div>
</div>
</article>
<div><div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div></div>
</div>
</div>
JS:
$('.hover').hover(function(){
$('.grafischewerktekst').html($(this).find('.description').html());
}, function(){
$('.grafischewerktekst').html('');
});
为每篇文章添加一个 data-*
属性 class .col
和一个 mouseover
事件来改变 .grafischewerktekst
[=32] 的文本=] 到 data-*
$('.col').on('mouseover',function()
{
$('.grafischewerktekst').text($(this).attr('data-desc'))
});
img{
width:100px;
height:100px;
float:left;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper grid4">
<div id="werk-1">
<article class="col" data-desc="Image 1 description"><!--add your image description to data-desc-->
<div class= "hover"><a href="VREESMACHINE.html"><img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg" width="100%" /></a></div>
</article>
<article class="col" data-desc="Image 2 description">
<div class= "hover"><a href="PRINTWERK.html"><img src="http://i.dailymail.co.uk/i/pix/2015/01/06/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg" width="100%" /></a></div>
</article>
<article class="col" data-desc="Image 3 description">
<div class= "hover"><a href="TEKENINGEN.html"><img src="http://i.telegraph.co.uk/multimedia/archive/03025/saatchi-plug-hole_3025834k.jpg" width="100%" /></a></div>
</article>
<article class="col" data-desc="Image 4 description">
<div class= "hover"><a href="BOEKEN.html"><img src="http://1.bp.blogspot.com/-MHxFnsPcldo/T6wD3La83DI/AAAAAAAAGSI/W9KKoTN2NVk/s1600/anaconda-Python-1.jpg" width="100%" /></a></div>
</article>
<div>
<div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div>
</div>
</div>
</div>