您好，我有一个包含 map 的 div。当用户将鼠标悬停在它上面时，我希望它的宽度从 80% 更改为 50%，在右侧创建空间，以便容纳将出现在右侧的图像。
我在网上查看了一些有关 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()
为了解决一些其他问题:
banditKing，恭敬，您需要回到原点，重新开始。您在过去几天发布了几个问题，表明您不了解 (1) HTML、(2) CSS 和 (3) Rails 的基本水平。
我可以这样判断:
1) 你应该几乎肯定没有名为 list.html.erb 的 Rails View ，它可能应该是 views/lists/show.html.erb 或 views/lists/index.html.erb。参见 Creating A Resource在 Rails 指南中。
2) Rails View 不应该包含 body 标签，并且可能不应该包含 meta 或 script 标签。 body 标签属于您的布局，否则您将不得不在每个 View 中重复该标签以确保每个 View 都有一个 body，否则您的页面上将有无效标记。
3) 您的样式表是 SCSS，而不是 CSS，这很好，除非您尝试做一些在 DOM 中完全没有意义的事情。您正在为 HTML 和 BODY 标签嵌套样式，它们必须在您嵌套它们的 div 之外......换句话说，您正在创建的 SCSS 正在推出不可能的 CSS完全无效的 HTML 元素的定义。
对于 2 和 3，请参阅 How to Make a Simple Valid HTML Document .
我可以继续 unobtrusive javascript同样，但现在我想您已经明白了。
您需要先学习什么是 HTML 及其工作原理。我建议从 W3C Schools 开始 HTML , CSS , 和 JavaScript .
然后，浏览 Michael Hartl 的 Rails 3 Tutorial .您可以在线免费完成或购买一本书。
前三个教程每个只需要几个小时，而 Rails 教程大概可以在一两天内完成。如果您按顺序完成其中的每一项，您将为自己节省 数周 甚至 数月 的时间来解决您现在提出的问题。
我强烈鼓励您先完成这些基础知识，然后再回到您现在正在从事的元素。
关于Rails 应用程序中的 jquery 和 css : shifting a div to the left in response to a mouseover event not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10269328/