Question

使用PHP，我返回一个包含每行包含3列的行的表。第三列有一个隐藏的信息图标，除非盘旋在上面。这是生成此表的PHP代码片段：

$contoutput = $contoutput . '<tr><td>' . $xleft[$i] . '</td><td>' . $xright[$i] . '</td><td class="hiddensourceicon" onMouseOver="showicon(this);">' . findsource($xsource[$i]) . '</td></tr>';

hiddensourceicon的CSS很简单：

.hiddensourceicon {display：none; }

这样，所述图标在加载时不显示。我正在使用JQuery删除这个类，因此＆＃34;取消隐藏＆＃34;悬停时的图标：

function showicon(row2show){ $(row2show).removeClass("hiddensourceicon"); }

但由于某种原因，JQuery函数拒绝触发。我做错了什么？

Answer 1

它认为当你将某些东西设置为无显示并试图将某些不存在的东西悬停在可以通过使用不透明度而非显示的方式解决时，就会遇到麻烦。如果你想继续使用显示器，你必须考虑屏幕上必须有的东西悬停在上面。这是使用不透明度的快速解决方案。

JSFiddle：https://jsfiddle.net/kriscoulson/kg6380z8/1/

您还应该远离使用内联JavaScript。例如mouseover =＆＃34; function（args）;＆＃34;

＆＃13;

var $hiddenicon = $('.hiddenicon');

$hiddenicon.on('mouseover mouseout', function() {
  var opacity = $(this).css('opacity') == 1 ? 0 : 1;
  $(this).css({
    opacity: opacity
  });
});

＆＃13;

table,
th,
td {
  border: 1px solid black;
}
.hiddenicon {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="hiddenicon">Icon</td>
    <td>Things in here</td>
    <td>Other things in here</td>
  </tr>
  <tr>
    <td class="hiddenicon">Icon</td>
    <td>Things in here</td>
    <td>Other things in here</td>
  </tr>
  <tr>
    <td class="hiddenicon">Icon</td>
    <td>Things in here</td>
    <td>Other things in here</td>
  </tr>
</table>

＆＃13;

Answer 2

隐藏后再次显示你需要进行显示：阻止否则它不会显示，因为你使用的是jquery，你可以使用.hide（）和.show（）方法ref - http://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 3

试试这个：

<?php
$contoutput = $contoutput . '<table cellspacing="5"><tr><td>' . "11" . '</td><td>' . "2222" . '</td><td id="xyz"  onMouseOver="showicon(this.id);"><span class="hiddensourceicon" >' . "hiiiii" . '</span></td></tr></table>';
echo $contoutput;
?>
<style>
.hiddensourceicon { display: none; }
</style>
<script>
function showicon(row2show){
var abc = "#"+row2show+" span";

$(abc).removeClass("hiddensourceicon"); }
</script>

Answer 4

您在当前问题中遇到的一个问题是：hiddensourceicon设置为display:none，因此无需悬停。如果您将其设置为opacity:0，它仍然会在那里悬停。另外，opacity可以设置动画 - 可能需要也可能不需要。

下面是一种方法，也许其他人会有更高效的方法，and here's a fiddle of it：

$contoutput = $contoutput . '<tr><td>' . $xleft[$i] . '</td><td>' . $xright[$i] . '</td><td class="hiddensourceicon">' . findsource($xsource[$i]) . '</td></tr>';

CSS：

.hiddensourceicon { 
  opacity:0;
}

.show {
  opacity:1;
}

jQuery的：

$( ".hiddensourceicon" ).hover(function() {
  $(this).toggleClass('show');
});

动态隐藏/显示使用JQuery

4 个答案: