Consult a mouseover effect-CodePudding

As shown in figure, the two PC need to move the mouse to classification, classification of sanhe subclassification three can be expanded; When the mouse move automatically shut down,
But in the mobile terminal needs two finger click on classification, classified three and three time can expand subcategories, finger click on the above three buttons and the margin can be shut,
Close test several times on the iphone can't, I don't know why,

CodePudding user response:

Mobile end without mouse, also cannot use a mouse events related mouseover and mouseout, mousemove, mousedown, mouseup,
Need to switch to gesture events touchstart, touchmove, touchend or click click events,

CodePudding user response:

reference 1/f, the sky wave response:

phone end without mouse, also cannot use a mouse events related mouseover and mouseout, mousemove, mousedown, mouseup,
Need to switch to gesture events touchstart, touchmove, touchend or click click events,

Specific how to write?

CodePudding user response:

You can use the click event, so that both sides can be compatible

CodePudding user response:

refer to the second floor KeepKobeBryant response:

Quote: reference 1/f, the sky wave response:

Mobile end without mouse, also cannot use a mouse events related mouseover and mouseout, mousemove, mousedown, mouseup,
Need to switch to gesture events touchstart, touchmove, touchend or click click events,

Specific how to write?

var d=document. GetElementById (" test");
D.o ntouchstart=function () {}

CodePudding user response:

refer to the second floor KeepKobeBryant response:

Quote: reference 1/f, the sky wave response:

Mobile end without mouse, also cannot use a mouse events related mouseover and mouseout, mousemove, mousedown, mouseup,
Need to switch to gesture events touchstart, touchmove, touchend or click click events,

Specific how to write?

Write your PC suspension, to click on the start not to go? API will not use Internet search usage not line, suspended trigger is not the same as click trigger is a method, the content can be copied, mobile phones have suspended this operation, long press

CodePudding user response:

Don't see your code you can according to this code to imitate the

<meta charset="utf-8" & gt;
Title
<style>
Body, ul, h2 {
Margin: 0;
Padding: 0;
}
Li {
The list - style: none;
}
# list {
Width: 300 px;
Border: 1 px solid # 000;
Margin: 20 px auto;
}
# list of h2 {
height: 50px;
The line - height: 50 px;
The text text-indent: 20 px;
Background: # 6 ff url (images/ico1. GIF) 5 px no - repeat;
}
# list ul {
Display: none;
}
# list ul li {
Height: 35 px;
The line - height: 35 px;
Border - bottom: 1 px solid # 00 f;
Text text-indent: 24 px;
}
# list. The active {
Background - image: url (images/ico2. GIF);
Background - color: # ff0;
}
# list. Hover {
Background: # CCC;
}
</style>
<script>
Window. The onl oad=function () {
Var oList=document. GetElementById (' list ');
Var aH2=oList. GetElementsByTagName (' h2);
Var aUl=oList. GetElementsByTagName (" ul ");
Var aLi=null;
Var arrLi=[];
for(var i=0; iAH2 [I] index=I;
AH2 [I] onclick=function () {
If (this. The className===' ') {
for(i=0; iAUl [I]. Style. The display='none';
AH2 [I] the className=' ';
}
AUl [this index]. Style. The display='block';
Enclosing the className='active';
} else {
AUl [this index]. Style. The display='none';
Enclosing the className=' ';
}
}
}
//small routines
for(i=0; iALi=aUl [I] getElementsByTagName (" li ");
For (var j=0; j[j] arrLi. Push (aLi);
}
}
The console. The log (arrLi. Length);
For (I=0; iArrLi [I] onclick=function () {
If (this. The className===' ') {
for(i=0; iArrLi [I] the className=' ';
}
Enclosing the className='hover';
} else {
Enclosing the className=' ';
}
}
}
}
</script>

<body>

- Zhang SAN & lt;/li>
- Zhang SAN & lt;/li>
- Zhang SAN & lt;/li>

- Li si & lt;/li>
- Li si & lt;/li>
- Li si & lt;/li>

- Cathy & lt;/li>
- Cathy & lt;/li>