var div = document.querySelector('div');
document.querySelector('button').addEventListener('click', function() {
var cl = div.cloneNode(true);
cl.style.cssText = 'height: auto; position: absolute; left: -100500px;';
document.body.appendChild(cl);
div.style.height = cl.offsetHeight + 'px';
cl.parentNode.removeChild(cl);
}, false);
<div data-hint="Какой-то текст к div-у 1">1</div>
<div data-hint="Какой-то текст к div-у 2">2</div>
<div data-hint="Какой-то текст к div-у 3">3</div>
<div id="hint"></div>
div[data-hint] {
display: inline-block;
width: 150px;
height: 150px;
margin: 15px;
border: 1px solid #900;
}
#hint {
display: none;
position: absolute;
padding: 5px;
margin: -15px auto auto 10px;
border-radius: 5px;
box-shadow: 0 0 1px 2px rgba(0,0,0,.3);
background-color: #fff;
z-index: 100500;
}
var hint = $('#hint');
$('div[data-hint]').on({
mouseenter: function(){
hint.text($(this).data('hint')).show();
},
mouseleave: function(){
hint.hide();
},
mousemove: function(e){
hint.css({top: e.pageY, left: e.pageX});
}
});
var elH = horizontal.offsetHeight,
elTop = horizontal.offsetTop,
winH = window.innerHeight,
factor = horizontal.scrollWidth / (elH * 2 + winH);
window.addEventListener('scroll', function (e) {
var elPosTop = horizontal.getBoundingClientRect().top + elH,
elPosBot = horizontal.getBoundingClientRect().bottom - elH;
if ((elPosTop >= 0) && (elPosBot <= winH)) {
var dE = document.documentElement,
top = (this.pageYOffset || dE.scrollTop) - (dE.clientTop || 0);
horizontal.scrollLeft = Math.abs(elTop - winH - top) * factor;
}
}, false);
$(function () {
$({saturate: 0}).animate({saturate: 100}, {
duration: 2000,
easing: 'swing', // linear
step: function () {
$('.block').css({
'-webkit-filter': 'saturate(' + this.saturate + '%)',
'filter': 'saturate(' + this.saturate + '%)'
});
}
});
});
<p class="info"></p>
<img alt="mashyna_taksy_nakleika_1_.jpg" src="http://i.piccy.info/i9/af7fb3ee41ec62c9160e3d6e8aec99c6/1445302105/40502/962048/mashyna_taksy_nakleika_1_.jpg" usemap="#myMap" width="459" height="459" />
<map name="myMap" id="myMap">
<area shape="circle" coords="104,273,35" data-info="переднее колесо" />
<area shape="circle" coords="351,272,36" data-info="заднее колесо"/>
<area shape="poly" coords ="100,207,132,191,174,175,207,172,265,172,318,175,365,189,379,194,373,211,108,212" data-info="стекло"/>
</map>
var output = $('.info'); // куда выводим
$('area').on({
mouseenter: function(){
output.text('Навели на ' + $(this).data('info'));
},
mouseleave: function(){
output.text(''); // если надо...
}
});
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.wrapper {
display: flex;
}
.wrapper > div {
flex: 1 100%;
}
.wrapper > div:nth-child(2) {
flex: 1 0 1024px;
}
появились проблема, как указать с тегами "li ul"Этот момент я что-то не совсем понял; уточняйте. Но может такой вариант подойдёт без уточнений:
[].forEach.call(document.querySelectorAll('.MenuBlock_1_panel'), function (el) {
el.addEventListener('mouseenter', function () {
this.previousElementSibling.style.backgroundColor = '#F5F5F5';
}, false);
el.addEventListener('mouseleave', function () {
this.previousElementSibling.style.backgroundColor = '';
}, false);
});