Change a hover to CSS to OnClick

Question

I made a button that displays text when hovered over but I would like for the text to be displayed once the user clicks the button and disappears once the user clicks the button again. The code is basically a button and text that displays "HELLO" in a black box set at .80 opacity. Any advice?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0016)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
    margin-left: 0px;
    margin-top: 0px;
}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:visited {color:#0000FF;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}

body {
  font: 16px/1.4 arial;
  background-color: #7D8859;
}




body {
  font: 16px/1.4 arial;
  background-color: #7D8859;
}

.imgWrap {
  position: absolute;
  height: 76px;
  width: 50px;
  top: 556px;
}

.imgDescription {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.80);
  color: #fff;
  margin: -500px -340px 85px 50px;
  padding: 10px;
  z-index:10;


  visibility: hidden;
  opacity: 0;

  /*remove comment if you want a gradual transition between states
  -webkit-transition: visibility opacity 0.2s;
  */
}


.imgWrap:hover .imgDescription {
  visibility: visible;
  opacity: 1;
}



</style>
<script src="../javascript/swfobject_modified.js" type="text/javascript"></script><script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
//-->
</script>
<script language="javascript" src="../javascript/configure.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/scorm.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/lms.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common2.js" type="text/javascript"></script>

<script type="text/javascript">

function popup(){
  cuteLittleWindow = window.open("hey", "littleWindow", "location=no,width=320,height=200"); 
}

</script>



<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/2-3_A.jpg','images/Module 3/3-0_A.jpg','images/Module 3/3-0_B.jpg','images/Module 3/3-0_E.jpg','images/Module 3/3-0_F.jpg','images/Module 3/3-2-1-7.jpg','images/Module 3/3-6-1a-5.jpg','images/Module 3/3-6-1a-2.jpg','images/Module 3/3-6-1a-1.jpg','images/module 4/4-2_A.jpg','interface/text_2.jpg')">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="800" height="600">
  <tr>
    <td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
      <tr>        </tr>
    </table>
    </td>
  </tr>
  <tr>      

  <td>&nbsp;</td>
  </tr>  
  <tr>
   <td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
      <tr>
        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','interface/text_2.jpg',1)">





              <div class="imgWrap"><img src="interface/text_1.jpg" name="Image10" width="76" height="50" border="0" id="Image10" />
                <p class="imgDescription">

                 HELLO! 


                  </p>



    </div></a><a href="m02_3.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('mircs_interface_r4_c15_s1','','../share/images/interface/mircs_interface_r4_c15_s2.jpg',1)"></a></td>
            </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>

Correction. This should better show what I envision. I want to achieve this through clicking rather than hover. While allowing the popup to stay open until the user clicks the button again. jsfiddle.net/44hx4/2 — user3062011
– user3062011, Commented Dec 3, 2013 at 18:47

Haneev · Accepted Answer · 2013-12-03 15:53:12Z

2

When i understand your question correct, you want a button which hover is different when the user has clicked on it?

You can do that by adding a class to the button, which handles the clicked CSS.

$('button').on('click', function () {
     $(this).addClass('clicked');
});

And the the css

button { background: red; }
button:hover { background: green; }
button.clicked { background: orange; }
button.clicked:hover { background: black; }

answered Dec 3, 2013 at 15:53

Haneev

7755 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3062011 Over a year ago

Hello and thank you so much! I would like the button to no longer hover but only operate when clicked to show the text and close the text once clicked again.

Siva Tumma · Accepted Answer · 2013-12-03 16:05:46Z

Use innerText and innerHTML Upon examining the code, you seem to have used some WISIWYG tool.

The tags on your question showed only javascript and html, css (your real work environment) and so I am assuming this in javascript and html, css.

Here is some code snippet you can copy and test

<!doctype html>
<head>
<script>
function changeButtonText(el){
 if (el.value == "HELLO")
   el.value = "GOOD BYE";
 else el.value="HELLO";

 el = document.getElementById("concerned_ptag");
 if (el.innerText == "HELLO")
   el.innerText = "GOOD BYE";
 else el.innerText="HELLO";
}
</script>
</head>
<body>
<p id="concerned_ptag">
HELLO
</p>
<input type="button" value ="HELLO" id="concerned_button" onclick="changeButtonText(this);">
</body>
</html>

And styling the p tag is easier for you. otherwise, ping again.

Tiago · Accepted Answer · 2013-12-03 16:38:39Z

0

When user clicks button, the text should appear, and when click again, disappear right?

$(document).ready(function(){
    $('.bt').click(function(){
        $(this).find('span').fadeToggle();
    });
});

<a class="bt"><span>Button Text</span></a>

Check Fiddle for full CSS/HTML/jQuery: http://jsfiddle.net/y45nY/1/

answered Dec 3, 2013 at 16:38

Tiago

3301 silver badge10 bronze badges

Collectives™ on Stack Overflow

Change a hover to CSS to OnClick

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related