Question

如何在图像按钮悬停时显示某些信息，并在单击时显示某些内容。

请参阅以下链接。如何在单个html页面中执行此操作。

http://livedemo00.template-help.com/wt_45856/

这是我的代码，我必须加强

谢谢。

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>

$(document).ready(function(){


    $("button").click(function() {
      if ( this.value == '1')

      {
        $("#business_new").hide();
        $("#business").show();
      }
      else  if ( this.value == '2')
      {
        $("#business").hide();
        $("#business_new").show();
      }

    });
});
</script>


</head>
<body>

<div class="container">

<div id='purpose' >                                             
    <button type="button" class="btn btn-primary" value="1">About us</button>
    <button type="button" class="btn btn-primary" value="2">Services</button>
</div>

<div style='display:none;' id='business'><br/>
<h1> 1st one </h1>
</div>

<div style='display:none;' id='business_new'><br/> 
<h1> 2nd one </h1>
</div>

</div>

</body>
</html>

Answer 1

使用jquery

    hover()
mouseover()

Answer 2

你可以使用jQuery来做这两件事。要解决悬停事件，您可以使用两个jQuery API：

.hover() - https://api.jquery.com/hover/

示例：

$("#img_btn").hover(function() {
  //do something
});

.mouseover() - https://api.jquery.com/mouseover/

示例：

$("#img_btn").mouseover(function() {
  //do something
});

对于您的示例，可能的解决方案可能如下所示：

$("button").hover(function() {
    if ( this.value == '1') {
        //do something when button 1 is hovered
    } else  if ( this.value == '2') {
        //do something when button 2 is hovered
    }
});

干杯！

如何在图像悬停时显示一些信息，并在单击时显示某些内容

2 个答案: