个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这是一个JS Fiddle它显示了悬停立方体时的工具提示。每当我将鼠标悬停在我希望悬停在整个立方体上只出现一次的每个面上时，都会调用工具提示。如果我可以使用我在 fiddle 中使用的相同插件，我更喜欢，以防万一，如果不可能，也欢迎其他解决方案。
JS
(function () {
var paper = Raphael("paper", "100%", "100%");
var cube2 = paper.set();
// animate the set
var anim = Raphael.animation({
opacity: 1
}, 500);
// second cube
cube2.push(
paper.path("M190 200 L260 160 330 200 260 240 190 200"),
paper.path("M260 240 L330 200 330 280 260 320 260 240"),
paper.path("M260 240 L260 320 190 280 190 200 260 240"));
cube2.transform("t0 -80").attr({
stroke: "#000000",
opacity: 0
}).animate(anim.delay(500));
// hover for set
function getHoverHandler(setName, fill1, fill2, fill3, swidth) {
return function () {
setName[0].attr({
fill: fill1,
cursor: "pointer",
"stroke-width": swidth
});
setName[1].attr({
fill: fill2,
cursor: "pointer",
"stroke-width": swidth
});
setName[2].attr({
fill: fill3,
cursor: "pointer",
"stroke-width": swidth
});
};
}
cube2.hover(getHoverHandler(cube2, "#000000", "#1e1e1e", "#282828", 0), getHoverHandler(cube2, "none", "none", "none", 1));
// function for easy class setting
function setClass(cubename, attrname) {
for (var i = 0; i < 3; i++) {
cubename[i].node.setAttribute("class", attrname);
}
}
// func ends
setClass(cube2, "secondcube");
// calling tooltipster on each set
$('.secondcube').tooltipster({
content: "second cube",
position: "left"
});
})();
最佳答案
正如我之前告诉您的那样，我认为您有两种不同的解决方案，一种使用内联 SVG 和 CSS，另一种使用 Rapahael 和 Javascript。我更喜欢第一个，但我将向您展示两者的示例。
使用 CSS 内联 Svg:
HTML:
<body>
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
<g id="cube">
<path id="f1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="f2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="f3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
</svg>
</body>
CSS:
svg {
position:absolute;
left:0;
top:0;
}
#cube {
fill:white;
stroke:black;
cursor:pointer;
}
#cube:hover #f1 {
fill:black;
}
#cube:hover #f2 {
fill:#1e1e1e;
}
#cube:hover #f3 {
fill:#282828;
}
JQUERY:
$('#cube').tooltipster({
content: "second cube",
position: "left"
});
拉斐尔:
var R = Raphael("paper");
var coor = [[130,170],[270,90],[410,170],[410,330],[270,410],[130,330]];
var toolText = ["first cube", "second cube", "third cube", "fourth cube", "fifth cube", "sixth cube"];
var cube =[];
var ed = [];
var i = 0;
function ont(n) {
cube[n].hover(function(){
cube[n].attr({"fill-opacity":"1"})
}, function(){
cube[n].attr({"fill-opacity":"0"})
});
};
for(i=0;i<coor.length;i++){
R.setStart();
R.path("M0,0l-70,-40 70,-40 70,40 -70,40").attr({fill:"#000"});
R.path("M0,0l70,-40 0,80-70,40 0,-80").attr({fill:"#1e1e1e"});
R.path("M0,0l0,80 -70,-40 0,-80 70,40").attr({fill:"#282828"});
ed[i] = R.path("M0,0l0,80 M0,0l70,-40 M0,0l-70,-40 0,80 70,40 70,-40 0,-80-70,-40-70,40");
ed[i].node.setAttribute("id","edges"+i);
cube[i] = R.setFinish();
cube[i].transform("t" + coor[i][0] + "," + coor[i][1]).attr({"fill-opacity":"0", "cursor": "pointer"});
ont(i);
$('#edges'+i).tooltipster({
content: toolText[i],
position: "left"
});
}
关于javascript - 将工具提示应用于 Raphael 中的一组而不是每一侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29620936/
25
4
0
这可能是一个愚蠢的问题，但是要求图中顶点的最小集合的规范问题是什么，以便从这些顶点开始，所有其他顶点都可以通过“旅行”不超过一条边到达？ 现实生活中的应用是:我需要认识哪些人，才能与地球上的其他人仅通
当浏览器在伪元素溢出并导致问题后调整绝对定位大小时。我正在寻找解决此问题的方法。只需调整浏览器大小，直到出现标题文本。 这是问题的演示:http://codepen.io/anon/pen/grKNo
我编写的 java 应用程序遇到了导致硬件性能问题的问题。问题(我相当确定)是我运行该应用程序的一些机器只有 1GB 内存。当我启动 java 应用程序时，我将堆大小设置为 -Xms 512m -Xm
Article 与 Medium 具有单向 ManyToOne 关系，它与下面的代码配合良好:保存和删除文章成功。 我想知道 JPA 是否有一种优雅的方式来删除最后一个子实体(在本例中为medium)
我想弄清楚如何在我的预约表格中将医生列表作为radio_buttons。现在，如果我使用“f.input :physician_id, :as => :radio_buttons”，我会得到一个“是/
我是一名优秀的程序员,十分优秀！