Google网站悬停卡 [英] Google Site Hover Card

问题描述

在Google站点上，如果用户将鼠标移到名称上，我希望能够显示带有其他信息(图片等)的悬停卡.

我已经找到了通过Java Script和CSS实现此目的的方法，但是我找不到任何一种方法可用于Google协作平台.

我如何实现这个目标?

解决方案

您可以将自己的脚本(javascript，css)与应用程序引擎集成在Google协作平台上. https://developers.google.com/appengine/?csw=1

您可以下载此应用程序，将脚本放入cloub中并与您的Google协作平台进行通信.您需要为计算机安装python

http://obtiva.com/blog/50-deploying-a-javascript-application-to-google-appengine-in-30分钟

如果您只需要在您的Google网站上集成CSS 您需要在Google站点的HTML框中添加CSS代码.

示例:

<object>

<style type="text/css">

 .roll
{
font-family: arial, helvetica, sans-serif;
margin: 0;
padding: 10;
}

.roll a
{
padding: 10;
display: block;
color: #000000;
font-size: 18px;
width: 150px;
height: 18px;
display: block;
text-decoration: none;
}

a:hover
{
background-color: #ccc;
color: #eee;
}

.roll
{
cursor: pointer;
}

</style>
<div class="roll"><br>
<a href="#">Rollover Texte 01</a><br>
<a href="#">Rollover Texte 02</a>
</div>
</object>

On a Google Site I want to be able to show a hover card with additional information (picture, etc) if the user moves his mouse over a name.

I've found ways to achieve this through Java Script and CSS, but I can't get either method to work for Google Sites.

How can I achieve this aim?

解决方案

You can integrate you script ( javascript , css ) on the Google Sites with app engine. https://developers.google.com/appengine/?csw=1

You can download this Application , put your script in the cloub and communicate with your Google Sites. You need to install python for you Computer

http://obtiva.com/blog/50-deploying-a-javascript-application-to-google-appengine-in-30-minutes

If you need just to integrate only CSS on your Google sites you need to add Css code on the Html Box on your Google Sites.

Example :

<object>

<style type="text/css">

 .roll
{
font-family: arial, helvetica, sans-serif;
margin: 0;
padding: 10;
}

.roll a
{
padding: 10;
display: block;
color: #000000;
font-size: 18px;
width: 150px;
height: 18px;
display: block;
text-decoration: none;
}

a:hover
{
background-color: #ccc;
color: #eee;
}

.roll
{
cursor: pointer;
}

</style>
<div class="roll"><br>
<a href="#">Rollover Texte 01</a><br>
<a href="#">Rollover Texte 02</a>
</div>
</object>

这篇关于Google网站悬停卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！