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
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.
halloihrDa
Der hier verwendete Code
<script src="/js_webseite/jquery.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>
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);
}
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;
}
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>