welches Element wird gehovert

Ich brauche den Tag Name bzw. den Class Name der gerade gehovert wird . Der Classname ist nicht das Problem ,nur welche Anzahl gerade gohovert wird Sorry meine Erklärung ist doof
hallo
ihr
Da
Wenn ich jetzt DA hovere , möchte ich div 3 angezeigt bekommen (Tag oder Class ist da jetzt egal kommt ja das gleiche dann raus) Code brauche ich nicht zeigen, weil mehr als hover und this Class habe ich nicht. Mir fehlt jetzt der Ansatz wie ich die Anzahl rausbekomme über welchen Elementen ich gerade hovere.

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> #out { background: rgba(30, 32, 44, .95); max-width: 400px; height: initial; margin-top: 2em; padding: 20px; color:white; font-size: 14px; line-height: 24px; display:none; min-width: 250px; text-align: left; will-change: transform; border-radius: 14px; -webkit-box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 8px 0px, rgba(0, 0, 0, 0.24) 0px 4px 8px 0px; box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 8px 0px, rgba(0, 0, 0, 0.24) 0px 4px 8px 0px; } .test{ background:red; border:3px solid green; padding:10px; } #exone,.exone{ width:99vw; border:3px solid red; color:blue; } #exone:hover,.exone:hover{ border:1px solid green; background:red; } </style> <body> <div id="test" class="exone">id class name und hover</div> <br> <br> <div id="out">nur id </div> <br> <br> <div class="test">nur classname</div> <br> <br> <div id="hallo" style="background:green">id inline style</div> </body> <script> /* Styls auslesen */ var proto = Element.prototype; var slice = Function.call.bind(Array.prototype.slice); var matches = Function.call.bind(proto.matchesSelector || proto.mozMatchesSelector || proto.webkitMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector); var elementMatchCSSRule = function(element, cssRule) { return matches(element, cssRule.selectorText); }; var propertyInCSSRule = function(prop, cssRule) { return prop in cssRule.style && cssRule.style[prop] !== ''; }; var cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) { return rules.concat(slice(styleSheet.cssRules)); }, []); var getAppliedCSS = function(elm) { var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm)); var rules = []; if (elementRules.length) { for (i = 0; i < elementRules.length; i++) { rules.push({ order: i, text: elementRules[i].cssText }) } } return rules; } function indentAsCSS(str) { return str.replace(/([{;}])/g, "$1\n ").replace(/(\n[ ]+})/g, "\n}"); } function getStyle(elm, lookInHTML = false) { var rules = getAppliedCSS(elm); var str = ''; for (i = 0; i < rules.length; i++) { var r = rules[i]; raus=r.text.replace(/;/g,';<br>'); raus=raus.replace('}','}<br>'); raus=raus.replace('{','{<br>'); str += '/* CSS styling #' + r.order + ' */\n<br>' + raus; } if (lookInHTML && elm.getAttribute('style')) str += '\n/* Inline styling */\n' + elm.getAttribute('style'); return indentAsCSS(str); } /* anzahl elemente von der gleichen sorte */ function indexInParent(node) { var children = node.parentNode.childNodes; var num = 0; for (var i=0; i<children.length; i++) { if (children[i]==node) return num; if (children[i].nodeType==1) num++; } anzahl=-1; return anzahl; } /* ab hier hovern und auslesen */ var all = document.querySelectorAll('*'); all.forEach( (i) => { i.addEventListener( 'mouseover', (e) => { id=i.id; if(id.length>=1){ console.log(id+id.length) elem=document.getElementById(id); weiter(elem); }else{ clas=i.className; if(clas.length>=1){ s=indexInParent(node) console.log(s); idx = (Array.from(all)).indexOf(this); console.log('Classname '+clas+idx) elem=document.getElementsByClassName(clas)[idx]; weiter(elem); }else{ // hier noc nach tagname fragen } } //anzahl=indexInParent(i.id); //console.log(i.id);//+','+anzahl) function weiter(elem){ var result = document.getElementById("out"); result.style.display='block'; result.innerHTML = getStyle(elem, true); console.log(elem) ; elem.addEventlistener('mouseenter',function(){ var result = document.getElementById("out"); result.style.display='none'; }) } }) }) var divs = document.querySelectorAll('div'); for ( x=0; x<divs.length; x++ ) { divs[x].addEventListener('mouseover', function(e) { idx = (Array.from(divs)).indexOf(this); console.log('ID '+divs[x].id) // console.log(_idx.toString() + '. div gehovered'); }); } </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!