悬停时更改 iframe 中元素的背景颜色
Posted
技术标签:
【中文标题】悬停时更改 iframe 中元素的背景颜色【英文标题】：Change background-color of elements within an iframe on hover 【发布时间】：2012-01-23 04:14:12 【问题描述】：如何更改<iframe> 中元素的background-color？ <iframe> 在我的域中。这是完整的代码（html、php 和 jQuery）：
<?php
error_reporting(E_ALL ^ E_NOTICE);
$url = $_GET['url'];
if( ! empty($url))
$data = file_get_contents($url);
$data = str_replace('<head>', '<head><base href="'.$url.'" /></base>', $data);
$data = preg_replace('#<script(.*?)>(.*?)</script>#is', '', $data);
$data = preg_replace('#<iframe(.*?)></iframe>#is', '', $data);
$data .=
'
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").each(function(i)
if($(this).css("position") == "fixed") $(this).css("display", "none");
);
</script>
'
;
die($data);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Webarto" />
<title>AdriaMart</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//function for xpath location
<script type="text/javascript">
function getXPath(node, path)
path = path || [];
if(node.parentNode)
path = getXPath(node.parentNode, path);
if(node.previousSibling)
var count = 1;
var sibling = node.previousSibling
do
if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) count++;
sibling = sibling.previousSibling;
while(sibling);
if(count == 1) count = null;
else if(node.nextSibling)
var sibling = node.nextSibling;
do
if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName)
var count = 1;
sibling = null;
else
var count = null;
sibling = sibling.previousSibling;
while(sibling);
if(node.nodeType == 1)
path.push(node.nodeName.toLowerCase() + (node.id ? "[@id='"+node.id+"']" : count > 0 ? "["+count+"]" : ''));
return path;
;
</script>
//function to get xpath location and write in textfield in focus
<script>
$(function ()
var selectedtextbox;
$('input[name="myinput"]').focus(function()selectedtextbox=$(this););
$('#iframe').load(function()
$('body *', $(this).contents()).click(function (event)
event.stopPropagation();
event.preventDefault();
var xpath = getXPath(this);
selectedtextbox.val(xpath)
);
);
);
</script>
<style type="text/css">
<!--
iframewidth:100%;height:400px;
-->
</style>
</head>
<body>
<!-- ... -->
<input id="iframe_url" name="" type="text" />
<input id="iframe_button" name="" type="button" />
<iframe id="iframe" src="?url=http://kupime.com"></iframe>
<p>
<script type="text/javascript">
document.getElementById('iframe_button').onclick = function ()
document.getElementById('iframe').src = '?url=' + document.getElementById('iframe_url').value;
;
</script>
<!-- ... -->
</p>
<p>Please click on title
<input id="" name="myinput" type="text" value="">
</p>
<p>Please click on Image
<input id="" name="myinput" type="text" value="">
</p>
<p>Please click on price
<input id="" name="myinput" type="text" value="">
</p>
</body>
</html>
【问题讨论】：
【参考方案1】：$("#id_of_element").css("backgroundColor","green");
将 id_of_element 替换为要更改颜色的元素的 ID。以及需要更改为绿色的颜色。
【讨论】：
不，我想在所有（p，a，li，ul，div，img，script）上实现这个 $("p, a, li, ul, div, img").css("backgroundColor","green");【参考方案2】：使用 css：
#id_of_element:hover
backgroundColor: green
【讨论】：
不，我想在所有（p，a，li，ul，div，img，script）上实现这个 脚本没有物理大小。并没有真正得到你需要的东西：所有元素都应该自己改变背景，还是全部改变？在第一种情况下，将 '#id_of_element' 替换为 'p,a,li,ul,div,img'，在后一种情况下将其替换为 'body'以上是关于悬停时更改 iframe 中元素的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章