すでにマウスオーバーイベントがある場合、どのようにマウスクリックイベントを追加できますか?私の要件は次のようになります:
例: -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>