html - CSS Background Hover Text -

-

i have background image getting set opacity 0.3, when hovering, getting set 0.8, seen in css code.

the image code.

<td background="images/1a.png" class="logo" width="160" height="160">     <div class="ch-info">         <h3><br>add new deal</h3>     </div> </td>

the css code.

.ch-info {     letter-spacing: 2px;     font-size: 20px; /*  margin: 0 30px;      padding: 45px 0 0 0;*/     height: 140px;     font-family: 'open sans', arial, sans-serif;     -webkit-text-stroke: 1px black;     color: #d3d3d3;     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;     vertical-align:middle;     text-align:center; } .logo {     opacity:0.3;     filter:alpha(opacity=30); /* ie8 , earlier */     background-repeat:no-repeat;     background-position:center;  } .logo:hover {     opacity:0.8;     filter:alpha(opacity=80); /* ie8 , earlier */      background-repeat:no-repeat;     background-position:center; }

the text , background hovering effect, want text stay solid, , background hover @ 0.8 when mouse on background , text stay solid regardless if background hovered or not.

as stated in comments, children inherit opacity parent. .ch-info class inherits opacity .logo, cannot have immediate parent .logo.

that being said, have <div class="logo"></div> before .ch-info uses position: absolute;, same height either <td> or .ch-info, , has desired background... however, have use position:relative; on .ch-info z-index not become problem.

demo: http://jsfiddle.net/dirtyd77/msg97/3/

html:

<table> <tr>     <td width="160" height="160">         <div class="logo" style="background:blue;"></div>         <div class="ch-info">              <h3>add new deal</h3>         </div>     </td> </tr>  <tr>     <td width="160" height="160">         <div class="logo" style="background:red;"></div>         <div class="ch-info">              <h3>add new deal</h3>         </div>     </td> </tr> <tr>     <td width="160" height="160">         <div class="logo" style="background:orange;"></div>         <div class="ch-info">              <h3>add new deal</h3>         </div>     </td> </tr>

css:

.logo {     width:160px;      height:160px;     position:absolute;     opacity:0.3;     filter:alpha(opacity=30); /* ie8 , earlier */     background-repeat:no-repeat;     background-position:center;  } .logo:hover {     opacity:0.8;     filter:alpha(opacity=80); /* ie8 , earlier */  } .ch-info {     letter-spacing: 2px;     font-size: 20px; /*  margin: 0 30px;      padding: 45px 0 0 0;*/     font-family: 'open sans', arial, sans-serif;     -webkit-text-stroke: 1px black;     color: #d3d3d3;     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;     vertical-align:middle;     text-align:center;     position:relative; }

let me know if have questions.

edit: however, situation seems better suited jquery. have provided example below.

demo: http://jsfiddle.net/dirtyd77/msg97/4/


Comments

Post a Comment

Popular posts from this blog

java - Run a .jar on Heroku -

-
i trying run .jar file on heroku, , can't find instructions anywhere on how this. have read wants me compile uploading heroku. possible, , if is, how this? if helps, trying run minecraft craftbukkit server, , don't have pom.xml file yet. you didn't provide details i'll try give , people reaches question way it. first of all, create heroku account , create heroku application (assumed have done that). second, need generate application jar , upload heroku. so, open terminal , install heroku cli (assuming unix terminal): $ sudo npm install -g heroku-cli you need have npm , nodejs installed, can check link: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04 once done that, can use npm update node version acceptable heroku-cli: $ sudo npm install -g n $ sudo n 7.10.0 and run: $ sudo npm install -g heroku-cli in order deploy jars, need install deploy plugin: $ sudo heroku plugins:install heroku-cli-deploy ...
Read more

java - Jtable duplicate Rows -

-
Image
when add new rows in jtable duplicate rows many times this method update jtable public final void tableaucomande(){ ((defaulttablemodel)tabcommande.getmodel()).getdatavector().clear(); session s=hibernateutil.getsessionfactory().opensession(); criteria cr1= s.createcriteria(commande.class); list <commande> lcs=cr1.list() ; criteria cr2= s.createcriteria(lignecommande.class); list <lignecommande> lck=cr2.list() ; if(lcs.size()!=0 && lck.size()!=0) { (commande lc:lcs) { for(lignecommande lig:lck){ ((defaulttablemodel)tabcommande.getmodel()).addrow(new object[]{ lc.getid_cmd(),lc.getnumcmd(),lc.getdate_cmd(),lc.getclient().getnomprenom(), lig.getproduit().getlib_prd(),lig.getquantite(),lig.getproduit().getid_prd() }); } } // tabcommande.setrowselectioninterval(tabcommande.getrowcount()-1,tabcommande.getrowcount()-1); } } this code add add data rows displaye...
Read more

validation - How to pass paramaters like unix into windows batch file -

-
i need pass various parameters .cmd file unix format file.cmd -configuration=value -source=value -flag but, try this: startlocal @echo off cls setlocal set cmdline=%* set configuration= set source= set badargs= set validation= goto main :splitargs echo splitargs(%*) if "%*" neq "" ( /f "tokens=1,2,* delims== " %%i in ("%*") call :assignkeyvalue %%i %%j & call :splitargs %%k ) goto :eof :assignkeyvalue echo assignkeyvalue(%1, %2) if /i %1==-configuration ( set configuration=%2 ) else if /i %1==-source ( set source=%2 ) else ( rem append unrecognised [key,value] badargs echo unknown key %1 set badargs=%badargs%[%1, %2] ) goto :eof :validate echo validating set validation=fail if defined configuration ( echo -configuration ok if defined source ( echo -source ok if not defined badargs ( set validation=success ) ) ) goto :eof :main cl...
Read more