Question

我正在尝试使用鼠标悬停在带有链接的按钮图像上更改两个（预览）div

其中一个预览div会显示一张图片，我想将其链接到特定网站

按钮图像在CSS

中也有一个鼠标悬停功能类

我可能会补充一点，会有多个图像使用这个函数，每个图像都有一个自己的div和一个类，我认为它在语义上不正确，因为它应该是在使用一个usorted列表时（但我会担心关于以后）

此外，我想添加我是脚本新手，但渴望学习

在鼠标输出或点击不重要时，当前（预览）内容可能会保留为最后一次鼠标悬停

目前更改预览div内容的工作原理是将document.getElementById添加到锚点，并将img分别添加到每个按钮，如下面的杂乱代码中所述，但我正在寻找一种更清洁的方法，如javascript或jquery和使用vars并使预览图像可单击并链接到预览的站点 [编辑：]此代码可用于将预览图像设为链接[/ EDIT]

如果我可以从外部文件

加载每个预览图像和文本，那真的很棒

<div class="btn">

 <a href="http://www.previewed_site.com" target="_blank"
 onmouseover="document.getElementById('preview_text_content')
 .innerHTML = 'a short preview description here';">

  <img onmouseover="document.getElementById('preview_img_content')
  .innerHTML = '<a href=\'http://www.previewed_site.com\'>
  <img src=\'preview.jpg\' /></a>';" src="btn.png" width="100px"
  height="40px" alt="mysite.com" /> 

 </a>
</div>

用于btn鼠标悬停的CSS（其工作方式与我想要的一样，但在此处添加以供参考）：

.btn {
    position relative;
    overflow: hidden;
    z-index: 1;
    top: 5px;
    width: 100px;
    height:40px;
}
.btn a { 
    display:block; 
    width:100px; 
    height:40px; 
    z-index: 100;
}
.btn a:hover { 
    background: url(btn_hover.png);
}

非常感谢一些建议或一些示例代码的链接

Answer 1

这里你去..用jquery ......

<强> HTML

<div class="btn">
   <a href="http://www.previewed_site.com" target="_blank" >
     <img src="btn.png" width="100px" height="40px" alt="mysite.com" /> 
   </a>
</div>

使用jquery，您可以对所选元素使用mouseover函数。选择器的jquery文档为here

<强> JQUERY

$(document).ready(function(){   //recommened you to use script inside document.ready always
$(".btn  a").mouseover(function(){  //selecting element with "<a>" tag inside an element of class "btn"
     $('#preview_text_content') .html('a short preview description here'); //getting an element with an id "preview_text_content" and repalcing its html with jquery html() ;
})

$(".btn  img").mouseover(function(){
  $('#preview_img_content').html('<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>'); //similar as above

});
});

<强>已更新

动态加载图片n文字...使用data attribute

<强> HTML

//first image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here">
   <img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview.jpg"/>
</a>
//second image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here 2">
   <img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview2.jpg"/>
</a>

<强> JQUERY

$(document).ready(function(){   
  $(".btn  a").mouseover(function(){  
   $('#preview_text_content') .html($(this).data('text_content')); 
 })

$(".btn  img").mouseover(function(){ 
   var imgContent='<a href=\'http://www.previewed_site.com\'><img src=\''+$(this).data('img_content') +'\' /></a>';
   $('#preview_img_content').html(imgContent); 

 });
});

或

您始终可以使用功能清除代码并使其易于理解。

<强> HTML

<div class="btn"> <a href="http://www.previewed_site.com" target="_blank" onmouseover="linkMouseoverFunction()"> <img onmouseover="imgMouseoverFunction()" src="btn.png" width="100px" height="40px" alt="mysite.com" />

<强> JAVASCRIPT

function linkMouseoverFunction() { document.getElementById('preview_text_content').innerHTML = 'a short preview description here'; } function imgMouseoverFunction() { document.getElementById('preview_img_content').innerHTML = '<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>'; }

在单独的div中更改鼠标悬停图像上的两个div内容

1 个答案: