Question

嘿大家我只需要快速了解或建议如何完成这项任务。我有一个头像选择屏幕，用户可以选择我们网站的其中一个头像。当用户盘旋并点击头像时，我会在所选头像周围出现红色的6px边框。现在我想要一些文字出现在头像的上方或下方。因为我们即将上线，所以我需要相当快地把它拿出来，所以没有什么太复杂的。我可以使用哪些快速简单的方法？我对javascript很好，但我试图避免使用它，我想不出任何其他方式，比如在img上可能是z-index或img？这是迄今为止的样子。再次，任何建议或想法不使用JavaScript请。

enter image description here

Answer 1

使用+（相邻的兄弟）选择器在悬停时显示隐藏元素，如下所示：

HTML

<img src="http://www.placekitten.com/200/200" />
<span>Hello World!</span>

CSS

span{
  display:none;
}
img:hover + span {
  display:block;
}

以下是其中的一个小提琴：http://jsfiddle.net/uH7g4/

Answer 2

我不知道如果我们可以使用css完成此操作，但我可以通过使用Javascript来完成此任务来帮助您。首先，在画布上绘制这些图像，一旦完成，只需使用这个Javascript代码（我假设你的画布变量是“canvas”）;

    var canvas = document.querySelector("canvas");
            canvas.addEventListener("mousedown",mouseDownHandler,false);
            function mouseDownHandler(){
                var ctx = canvas.getContext("2d");
                ctx.font = "30px Arial";
                ctx.fillText("Your Text",xCoordinate,yCoordinate);
            }

我离开了xCoord和yCoord，如果你想让它成为中心点那么就会相应调整

  var xCoordinate = canvas.style.width/2;
  var yCoordinate = canvas.style.height/2;

然后只需将此值插入。

Answer 3

对于边框，可以使用：悬停，因为您想要在悬停时更改头像的外观。但是，同时显示一段文字需要更改内容。使用CSS来做这件事是错误的，因为CSS应该用于外观，而不是上下文。

因此，我仍然建议您使用javascript进行操作。可以使用CSS完成文本的定位和外观。但是，为了显示文本，您应该使用javascript。

除了使用Javascript执行此任务之外的任何想法？

3 个答案: