Question

我有一个图像作为背景，并将在其上添加元素（圆形点）在某些位置

如何在点击，放大和显示文字时提出这一点！？

如果仅CSS无效，我想知道jQuery是否有帮助。

CSS

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#point {
  cursor: pointer;
  outline: none;
  z-index: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: rgba(26, 26, 26, 0.85);
  border: 5px solid #7fcff7;
}

HTML 的

<div id="container">
<img id="image" src="http://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png"/>
<p id="point" style="top:15%;left:35%"></p>
</div>

Answer 1

是的，你可以使用jquery来实现它。

只需附加一个div并制作其display as Hidden

然后，在点击圆圈时，获取click事件的pageX和pageY值并将其应用于div

$("#point").click(function(e){
    $(".showDiv").slideToggle();
    $(".showDiv").css({
      "top": Number(e.pageY)+"px",
      "left": Number(e.pageX)+"px",
    });
    $(".showDiv").text("PLace Text");
});

以下是Link

希望有所帮助：）

（更新了切换效果的代码：D）

Answer 2

你需要这样吗？

＆＃13;

<html>
  <head>
    <style>
	#container {
	  height: 400px;
	  width: 400px;
	  position: relative;
	}
	#image {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	#point {
	  cursor: pointer;
	  outline: none;
	  z-index: 0;
	  position: absolute;
	  width: 20px;
	  height: 20px;
	  border-radius: 20px;
	  background: rgba(26, 26, 26, 0.85);
	  border: 5px solid #7fcff7;
	}
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
	
	$(document).ready(function(){
		text1=$("#point").text();
		$("#point").text("")
		$("#point").click(function(){
			$(this).css("width","250px");
			$(this).css("height","200px");
			$(this).css("font-size","20px");
			$(this).css("color","#fff");
			$(this).css("text-align","center");
			$("#point").text(text1)
		});
	});
	</script>
</head>
<body>

<div id="container">
<img id="image" src="http://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png"/>
<p id="point" style="top:15%;left:35%">dsadsad</p>

</div>
	  
</body>
</html>

＆＃13;

多点

＆＃13;

<html>
  <head>
    <style>
	#container {
	  height: 400px;
	  width: 400px;
	  position: relative;
	}
	#image {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	.point {
	  cursor: pointer;
	  outline: none;
	  z-index: 0;
	  position: absolute;
	  width: 20px;
	  height: 20px;
	  font-size:1px;
	  border-radius: 20px;
	  background: rgba(26, 26, 26, 0.85);
	  border: 5px solid #7fcff7;
	  overflow:hidden;
	}
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
	
	$(document).ready(function(){		
		$(".point").click(function(){
			
			$(".point").css("width","20px");
			$(".point").css("height","20px");
			$(".point").css("font-size","1px");
			$(".point").css("color","#000");
			$(".point").css("text-align","center");
			
			$(this).css("width","250px");
			$(this).css("height","200px");
			$(this).css("font-size","20px");
			$(this).css("color","#fff");
			$(this).css("text-align","center");
			
		});
	});
	</script>
</head>
<body>

<div id="container">
<img id="image" src="http://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png"/>
<p class="point" style="top:15%;left:35%">dsadsad</p>
<p class="point" style="top:55%;left:75%">dsadsad</p>

</div>
	  
</body>
</html>

＆＃13;

如何放大元素并在点击时显示文字

2 个答案: