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
 })

Answer 2

热门图表：

Letting jQuery handle the hover events instead of using the :hover css pseudo is the only way to do this, as jQuery cannot manipulate the :hover state，而css无法提供切换功能。而是使用属性和属性选择器。两者都可以通过css和jQuery进行操作

CSS：

.TopGraph a[attr-active="one"]
{
    float:left;
    width:240px;
    height:104px;
    position:absolute;
    left:0;
    top:35px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/one-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="two"]
{
    float:left;
    width:250px;
    height:180px;
    position:absolute;
    left:250px;
    top:51px;
    -webkit-border-radius: 100px 20px 20px 500px;
    -moz-border-radius: 100px 20px 20px 500px;
    border-radius: 100px 20px 20px 500px;
    background:url('../images/two-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="three"]
{
    float:left;
    width:221px;
    height:103px;
    position:absolute;
    left:84px;
    top:155px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/three-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

JS：

$(document).ready(function() {
    $('.TopGraph').find('a').each(function() {
        $(this).attr('attr-active', '');
        $(this).attr('attr-clicked', '');
        $(this).click(function(event) {
            event.preventDefault();
            var isAnyActive_dsanjj325kj4 = false;
            if ($(this).attr('attr-clicked') == "true") {
                isAnyActive_dsanjj325kj4 = true;
            }
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                $(this).attr('attr-clicked', '');
            });
            if (isAnyActive_dsanjj325kj4 == false) {
                $(this).attr('attr-clicked', 'true');
                $(this).attr('attr-active', $(this).attr('class'));
            }
        });
        $(this).hover(function() {
            if ($(this).attr('attr-clicked') == '') {

                var isAnyActive_dsanjj325kj4 = '';
                $('.TopGraph').find('a').each(function() {
                    $(this).attr('attr-active', '');
                });
            }
            $(this).attr('attr-active', $(this).attr('class'));
        }, function() {
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                if ($(this).attr('attr-clicked') == 'true') {
                    $(this).attr('attr-active', $(this).attr('class'));
                }
            });
        });
    });
});

底部图 [原始答案]：

通过将属性附加到元素以检测它是否已被单击，然后将该属性重置为所有元素（如果另一个元素与之交互），则可以实现此效果：

$(document).ready(function() {
    $('[id^="slide"]').each(function() {
        $(this).attr('attr-active', 'false');
        $(this).attr('attr-clicked', 'false');
        $(this).click(function(event) {
            event.preventDefault();
            var preExist_ksnfk4n534nj5345 = false;
            if ($(this).attr('attr-clicked') == 'true') {
                preExist_ksnfk4n534nj5345 = true;
            }
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'show', 'hide');
            });
            if (preExist_ksnfk4n534nj5345 == true) {
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'hide', 'show');
            } else {
                $(this).attr('attr-active', 'true');
                $(this).attr('attr-clicked', 'true');
                changeText($(this), 'hide', 'show');
            }
        });
        $(this).hover(function() {
            var isAnyActive_san9h39423ht = false;
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                changeText($(this), 'show', 'hide');
            });
            changeText($(this), 'hide', 'show');
        }, function() {
            if ($(this).attr('attr-active') == 'false') {
                changeText($(this), 'show', 'hide');
            }
            $('[id^="slide"]').each(function() {
                if ($(this).attr('attr-clicked') == 'true') {
                    changeText($(this), 'hide', 'show');
                }
            });
        });
    });
});

function changeText(obj, cl1, cl2) {
    obj.children('span').eq(0).attr('class', cl1);
    obj.children('span').eq(1).attr('class', cl2);
}

Answer 3

你可以添加

el.onclick= function(){
//code
}

见here

Answer 4

这应该不是问题，只需创建两个显示和隐藏文本的函数，并从两个事件中调用它们。即。

el.onmouseover = function(){
showFunction();
};
el.onclick = function(){
showFunction();
}
function showFunction(){
changeText(this,'hide','show');
}

此外，您应该考虑使用jquery，因为选择元素和捕获事件更加明智和清晰。另外考虑使用css类而不是id-s列表，因为它更清晰。此外，如果您使用css类，即class =“slide”，您可以将之前的文本称为关闭：

el.onclick = function(){
$(".slide").hide(); // hides all text elements.
showFunction();
}

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

4 个答案:

热门图表：

底部图 [原始答案]：