Rails 应用程序中的 jquery 和 CSS:向左移动 div 以响应鼠标悬停事件不起作用

嗨，我有一个包含地图的div。当用户将鼠标悬停在它上面时，我希望它将其宽度从 80% 更改为 50%，从而在 righ 上创建空间，以便容纳将出现在右侧的图像。

我

在网上查看了一些jquery事件处理的例子，并试图将我在那里看到的内容合并到我自己的应用程序中。但是，我认为我做得不太对，因为对鼠标悬停没有响应。有人可以帮我诊断错误，因为我是 Web 开发、rails 和 jquery 的新手。

以下是我的rails项目中的相关文件：

list.html.erb - 包含所有 HTML

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<script type="text/javascript"  
src="http://maps.googleapis.com/maps/api/js?key=Q&sensor=false"></script>  
<%= stylesheet_link_tag 'application' %>  
<%= javascript_include_tag 'application'%>  
<%= stylesheet_link_tag 'listings' %>  
<body onload="initialize()">  
    <div id="control_panel">  
    <input type="button" onclick="getlistings();" value="Add Markers">  
    <input type="button" onclick="clearMarkers();" value="Remove Markers">  
    </div>  
    <div id="info"></div>  
    <div id="map_canvas" onmouseover="moveLeft();" ></div>  
</body>

map.js.erb - 包含 JavaScript 和 jquery 函数

function moveLeft()  
{  
    $(function(){ $("#map_canvas").bind("mouseover", shiftLeft) });  
    $(function(){ $("#map_canvas").bind("mouseleave", shiftLeft) });  
}  
function shiftLeft(evt)  
{  
    $("#map_canvas").toggleClass("shifted_mapCanvas");  
}

CSS 文件：

#map_canvas  
{  
  width: 90%;  
  height: 90%;  
  margin-left: auto;  
  margin-right: auto;  
  html   
  {   
    height: 100%   
   }  
  body   
  {   
    height: 100%;   
    margin: 10;   
    padding: 10   
   }  
}
.shifted_mapCanvas  
{  
  width: 50%;  
  height: 90%;  
  margin-left: auto;  
  margin-right: auto;  
  html    
  {   
    height: 100%   
   }  
  body   
  {   
    height: 100%;   
    margin: 10;   
    padding: 10   
   }  
}

为了尝试只回答你提出的问题，你调用了jQuery函数（$("#map_canvas").bind("mouseover", shiftLeft)），但是你在哪里加载了jQuery？

此外，您正在尝试内联触发javascript调用，这绝对不是推荐的方法。相反，假设加载了 jQuery，如果您使用了：

<script>
$('div#map_canvas').hover({
  function() { $(this).toggleClass('shifted_mapCanvas'); },
});
</script>

。它应该有效。查看 hover（）和 toggleClass（）的文档

要涵盖其他一些问题：

土匪王，恭敬地，你需要回到起点，重新开始。在过去的几天里，你发布了几个问题，说明你不理解（1）HTML，（2）CSS和（3）基本级别的Rails。

以下是我如何判断：

1）你几乎肯定不应该有一个叫做list.html.erb的轨道视图，它可能应该是views/lists/show.html.erb或views/lists/index.html.erb。请参阅《Rails 指南》中的创建资源。

2） Rails 视图不应包含正文标签，并且可能不应包含元或脚本标签。body 标记属于您的布局，否则您将不得不在每个视图中重复该标记以确保每个视图都有一个正文，否则您的页面上将有无效标记。

3）你的样式表是SCSS，而不是CSS，这很好，除了你试图做一些在DOM中完全没有意义的事情。您正在嵌套 HTML 和 BODY 标签的样式，这些样式必须在您嵌套它们的div 之外......换句话说，您正在创建的 SCSS 正在为完全无效的 HTML 元素提供不可能的 CSS 定义。

对于 2 和 3，请参阅如何制作简单有效的 HTML 文档。

我也可以继续介绍不显眼的javascript，但现在我想你明白了。

您需要备份并从了解HTML是什么以及它是如何工作的开始。我建议从 W3C 学校开始学习 HTML、CSS 和 JavaScript。

然后，浏览Michael Hartl的Rails 3教程。您可以免费在线完成或购买书籍副本。

前三个教程每个应该只需要几个小时，而 Rails 教程大概可以在一两天内完成。如果你按顺序解决每一个问题，你将节省数周甚至数月的时间来纠结你现在提出的问题。

我强烈建议您先完成这些基础知识，然后再回到您现在正在从事的项目。

相关内容

最新更新

热门标签：