Question

我使用带有Bootstrap插件的Wordpress构建此website。

正如您在底部看到的那样，col-md-8有一个内容表，右边有col-md-4有图片。

此图片应为动画工具提示。基本上当你用鼠标移到桌子row上时，图片应该会改变。我使用这个JS <script>但不起作用：

JS：

$(document).ready(function(){
$('.row1').hover(function() {
  $('.one').toggle();
});

$('.row2').hover(function() {
  $('.two').toggle();
});

$('.row3').hover(function() {
  $('.tree').toggle();
});     
});

这是 CSS ：

.one, .two, .tree { 
display: none; 
}


.row1:hover {
background-color: #91bd10;
color: #ffffff;
}

.row2:hover {
background-color: #91bd10;
color: #ffffff;
}

.row3:hover {
background-color: #91bd10;
color: #ffffff;
}

.info-box {
width: 400px;
height: 200px;
background-image: url('http://www.jp.nowcommu.myhostpoint.ch/wp-content/uploads/2016/03/base-1.png');
background-size: cover !important;
margin: 0 auto;
}

有什么想法吗？

编辑JS：

if($ == undefined){
 $ = jQuery;
}
$(document).ready(function(){
$('.row1').hover(function() {
  $('.one').toggle();
});

$('.row2').hover(function() {
  $('.two').toggle();
});

$('.row3').hover(function() {
  $('.tree').toggle();
});     
});

编辑2： JS Code

Answer 1

尝试在$(document).ready

之前使用以下内容

if($ == undefined){
     $ = jQuery;
}

Answer 2

你的JS中有错误。检查你的控制台： Uncaught SyntaxError: Unexpected token <

这是您网页中的代码：

 $(document).ready(function(){
    $('.row1').hover(function() {
      $('.one').toggle();
    });</p>
<p>   $('.row2').hover(function() {
      $('.two').toggle();
    });</p>
<p>    $('.row3').hover(function() {
      $('.tree').toggle();
    });

查看那些<p>代码？

我建议您使用问题中的代码替换您网站中的代码。

Wordpress和JS Tooltip不起作用

2 个答案: