2

HTML:

<div class="prof_foto"><img src="{foto}" alt="" /></div>
<div class="prof_isonl">
    <div class="prof_off">Оффлайн</div>
</div>

Как при наведении на .prof_foto сделать opacity: 0.7 у .prof_off?

3 ответа 3

4

без анимации:

$('.prof_foto').hover(
    function(){
        $('.prof_off').css({ opacity: 0.7 });
    },
    function(){
        $('.prof_off').css({ opacity: 1.0 });
    }
);

с анимацией:

$('.prof_foto').hover(
    function(){
        $('.prof_off').fadeTo('slow', 0.7);
    },
    function(){
        $('.prof_off').fadeTo('slow', 1.0);
    }
);
4

Зачем использовать для этого jquery или javascript вообще. Это можно сделать через css - даже с анимацией.

div {
  padding: 20px;
  border: 1px solid #000;
}
.prof_foto {
  background: pink;
  cursor: pointer;
}
.prof_off {
  background: blue;
  transition: opacity .3s ease-out;
  opacity: 1;
}
.prof_foto:hover + div .prof_off {
  opacity: .2;
}
<div class="prof_foto">
  <img src="{photo}" alt="" />
</div>
<div class="prof_isonl">
  <div class="prof_off">Оффлайн</div>
</div>

2

Для новых браузеров

<style>
.prof_foto {
    with: 100px;
    height: 100px;
    border: 1px solid red;
}
</style>
</head>

<body>
<div class="prof_foto"><img src="" alt="" /></div>
<div class="prof_isonl">
    <div class="prof_off">Оффлайн</div>
</div>

<script>
    function handler() {    
        document.getElementsByClassName('prof_off')[0].style.opacity = 0.7;    
    }
    document.getElementsByClassName('prof_foto')[0].addEventListener('mouseover', handler, false)
</script>

Есть кросс-фунция для поиска по классу Сейчас думаю над вариантом CSS

.prof_foto {
    with: 100px;
    height: 100px;
    border: 1px solid red;
}.prof_foto: hover + * .prof_off {
    opacity: 0.1
}

Но такое через Еxpression я не знаю как эмулировать для ие7. Вот вам еще одна полезная функция

function setOpacity(obj, val) {
    if(!+"\v1") {
        typeof obj.filters.alpha != 'undefined'
            ? obj.filters.alpha.opacity = val * 100
            : obj.style.filter = 'alpha(opacity=' + val * 100 + ');';
    }

    obj.style.opacity = val;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.