Change opacity of some content with mouse hover

[Mohammad]

Tobias Beer has a small CSS to hide the tiddler buttons and display them with mouse over the tiddler

.tc-tiddler-frame .tc-titlebar button {

opacity: 0;

transition: opacity .5s ease-in-out;

}

.tc-tiddler-frame:hover .tc-titlebar button {

zoom: 1;

filter: alpha(opacity=100);

opacity: 1;

}

I want to use the same ides and defined a custom class like mycls and then

.tc-tiddler-frame .tc-titlebar .mycls {

opacity: 0;

transition: opacity .5s ease-in-out;

}

.tc-tiddler-frame:hover .tc-titlebar .mycls{

zoom: 1;

filter: alpha(opacity=100);

opacity: 1;

}

and inside a tiddler I used it like below

<div class="mycls">

! Hello

This is a test.

</div>

but it does not work!

Any comment idea?

Note I can change opacity for a block with mouse hover, it needs to have mouse over that block! but here I want to change opacity when mouse over the tiddler.

Mohammad

[Mohammad]

I found the solution. The below code works

.tc-tiddler-frame .mycls {

opacity: 0;

transition: opacity .5s ease-in-out;

}

.tc-tiddler-frame:hover .mycls{