Вкл: наведение непрозрачности 0.0 на другом уровне в css

Я пытаюсь сделать ссылку двойного опрокидывания. При перекатывании 'foto'; Я хотел бы сделать «fotografie», и «grafisch» исчезнет (то же самое: при переходе через grafisch, «foto», чтобы исчезнуть). Я обнаружил, что с opactiy было бы проще всего, но я не могу понять код.Вкл: наведение непрозрачности 0.0 на другом уровне в css

Любая помощь очень ценится.

HTML

<a class="fotografie" href="URL"> 
<div class="foto">foto</div> 
<div class="fotografieh">fotografie</div> 
</a><a class="grafischontwerp" href="URL2"> 
<div class="grafisch">grafisch</div> 
<div class="grafischontwerph">grafisch ontwerp</div> 
</a>

CSS

.masterplan .fotografie {color: #ff6666;} 
.masterplan .fotografie .fotografieh { display: none; } 
.masterplan .fotografie:hover .foto { display: none; } 
.masterplan .fotografie:hover .fotografieh { display: inline;} 
.masterplan .grafischontwerp {color: #33cccc; } 
.masterplan .grafischontwerp .grafischontwerph { display: none; } 
.masterplan .grafischontwerp:hover .grafisch { display: none; } 
.masterplan .grafischontwerp:hover .grafischontwerph { display: inline;}

источник

2013-10-13 Michiel Stegen

CSS может предназначаться только потомки или sibings, которые приходят позже. Возможно, вы сможете сделать «зависание над первым, чтобы скрыть второй», но не наоборот. –

Ну да, я это понял, но я хочу, чтобы он работал и наоборот. : P –

Я бы посмотрел в jQuery, чтобы изменить классы при наведении. Затем вы можете отобразить: none; etc –

Не видя простой ответ, используя только CSS, я хотел бы предложить добавить простые несколько строк JQuery:

$(document).ready(function() { 

    $(".foto").hover(function() { // Assign 'hover' action to all elements with 'foto' class 
     $(".grafisch").toggle(); // 'toggle' display on 'hover' event trigger for all elements with 'grafisch' class 
    }); 
    $(".grafisch").hover(function() { 
     $(".foto").toggle(); 
    }); 
    /* insert other jQuery code, if any */ 
    ... 
});

Я надеюсь, это помогает, если вы используете jQuery.

EDIT:

Майкл, я подозревал, что вы не можете быть знакомы с JavaScript/JQuery. В Интернете есть множество примеров и руководств, которые вы можете легко найти. Кроме того, не забудьте также искать StackOverflow.

Если вы планируете продолжить работу с html и css, я бы предложил изучить хотя бы базовую концепцию JavaScript и jQuery, которая является одной из наиболее широко используемых фреймворков/библиотек JavaScript.

Для начала, проверьте следующие ссылки:

, что я также добавил некоторые комментарии к коду я написал ранее Примечание. Дайте мне знать, если у вас есть другие вопросы по этой теме.

Заканчивать эту демку ->DEMO

источник

2013-10-13 15:31:16 BinaryCat

Привет, Vivendi, спасибо вам за комментарий и отредактируйте! Я играю с ним в течение двух ночей, но теперь происходит то, что тумблер выполняет функцию div, которая должна скрываться до тех пор, пока зависает только мигание, вместо того, чтобы оставаться в стороне до тех пор, пока я не забуду ... –

@Michiel - Я быстро ударил несколько строк кода. Он основан на моей интерпретации вашего вопроса, поэтому я мог бы немного отследить, но он должен дать вам представление. Ссылка http://jsfiddle.net/kkim1975/pp5EG/ – BinaryCat

Отличная работа, [тег: Vivendi75]! Я так рад ответам!Я постараюсь объяснить, чего я хочу достичь: при наведении вы показываете две коробки; то, что я ищу, - это коробка, в которой вы находитесь, содержимое меняется с «foto» на «fotografie», то же самое с «grafisch» на «grafisch ontwerp». [Здесь] (http://img823.imageshack.us/img823/4509/8itm.jpg) изображение с mouseOff; наведите курсор на фото и наведите указатель мыши на grafisch соответственно. Еще раз спасибо за вашу помощь! –

Вкл: наведение непрозрачности 0.0 на другом уровне в css

ответ

Смежные вопросы