将鼠标悬停在CSS上，以OnClick。

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?

我做了一个按钮，当鼠标悬停的时候显示文本，但我希望在用户点击按钮后显示文本，一旦用户再次点击按钮，就会消失。代码基本上是一个按钮和文本，在一个设置为.80不透明度的黑盒中显示“HELLO”。任何建议吗?

<!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>

3 个解决方案

#1

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.

您可以通过向按钮添加一个类来实现这一点，该按钮处理单击的CSS。

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

And the the css

和css

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

#2

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

在检查代码时使用innerText和innerHTML，您似乎已经使用了一些WISIWYG工具。

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.

你的问题上的标签只显示了javascript和html, css(你的真实工作环境)，所以我在javascript和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.

样式化p标签对你来说更容易。否则,平了。

#3

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/

查看完整的CSS/HTML/jQuery: http://jsfiddle.net/y45nY/1/。

#1