2

当我们已经有鼠标悬停事件时，我们如何添加鼠标单击事件我的要求是这样的：

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

4 回答 4

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
 })
于 2012-11-26T12:14:18.363 回答
2

上图：

让 jQuery 处理悬停事件而不是使用 :hover css 伪是做到这一点的唯一方法，因为 jQuery 不能操纵 :hover 状态，而 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);
}
于 2012-11-26T13:49:52.017 回答
0

你可以添加

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

如此处所见

于 2012-11-26T12:18:36.220 回答
0

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

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();
}
于 2012-11-26T12:24:35.177 回答