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

Question

当我们已经有 mouseover 事件时，我们如何添加 mouse click 事件我的要求是这样的：

示例： - 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

顶部图表：

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 2

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

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

您还应该考虑使用 jquery，因为它在选择元素和捕获事件时更加简洁明了。还可以考虑使用 css 类而不是 id-s 列表，因为它更干净。 此外，如果您使用 css 类，即 class="slide" 您可以调用关闭以前的文本非常 eiser：

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

Answer 3

你可以添加

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

如所见here

Answer 4

你可以用不同的方式来做，首先你可以把鼠标悬停的行为留给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
 })