javascript - 我们如何提供鼠标单击功能以及鼠标悬停功能？

Question

我们如何在已经有鼠标悬停事件时添加鼠标点击事件我的要求是这样的:

示例: - http://wheaton.advisorproducts.com/investment-advisory

要求-

• MouseOver 功能按正确顺序工作。
• 我想同时添加点击事件和鼠标悬停事件 -

当用户单击顶部漏斗和底部圆圈中给出的任何图像部分时 - 然后它们的相关文本或内容将可见，直到用户单击任何其他部分并且此单击事件鼠标悬停功能将以同样的方式工作。

手段 - 当用户将鼠标移到图像部分时，他们的相关文本将可见，但如果用户单击任何部分，则他们的相关文本将每次都可见，直到用户单击任何其他部分部分或部分或将鼠标移到其他部分。

下面是我只为鼠标悬停功能创建的 js - 现在我想要同时使用鼠标悬停和单击事件。

var IdAry=['slide1', 'slide2','slide3','slide4','slide5','slide8','slide9','slide12','slide13','slide14','slide15','slide16'];
window.onload=function() {
 for (var zxc0=0;zxc0<IdAry.length;zxc0++){
  var el=document.getElementById(IdAry[zxc0]);
  if (el){
   el.onmouseover=function() {
     changeText(this,'hide','show')
    }
   el.onmouseout=function() {
     changeText(this,'show','hide');
    }
  }
 }
}
function changeText(obj,cl1,cl2) {
   obj.getElementsByTagName('SPAN')[0].className=cl1;
   obj.getElementsByTagName('SPAN')[1].className=cl2;
}

下面是HTML部分:

<div class="BottomGraph">
        <div class="row1">
            <a href="#" id="slide1">
                <span id="span1"></span>
                <span class="hide">Each client is provided with quarterly aggregated account statements detailing investment performance across individual accounts. Periodic client meetings provide opportunities to receive more detailed performance attribution.</span>
            </a>
            <a href="#" id="slide2">
                <span id="span1"></span>
                <span class="hide">How funds are invested across broad asset classes is the primary determinant of long term returns and determines the overall risk profile of your portfolio. We therefore take great care in recommending an asset allocation that incorporates the financial goals and risk tolerance of each client.</span>                        
            </a>
        </div>  

        <div class="row2">
            <a href="#" id="slide3">
                <span id="span1"></span>
                <span class="hide">We continuously monitor our managers to ensure that each strategy is performing as expected.</span>
            </a>
            <a href="#" id="slide4">
                <span id="span1"></span>
                <span class="hide">The asset allocation decision is implemented with money managers vetted by WWP for their experience, skill and expertise in their respective investment strategies, including tactical ETF managers, growing dividend equity managers or fixed-income managers.</span>                       
            </a>
        </div>
    </div>

Answer 1

你可以用不同的方式做到这一点，首先你可以将鼠标悬停行为留给 css，正如我所见，它只是一个文本区域显示。

div {display:none;}
div:hover, div:active {display:block;}

然后，如果您希望不同的事件具有相同的行为，我建议使用 jquery，它有助于通过 on 和 bind 方法声明多个事件。

 $.bind('click, hover', function(){
     //do stuff
 })

还有 on 方法:

 $.on('click, hover', function(){
     //do stuff
 })