我找到了这个教程并开始通过更改html等来添加它。
当我添加另一个圆圈时，第一个仍然可以工作但是当我将鼠标悬停在第二个圆圈上时它什么也没做。
我计划有4个不同大小的圆圈，当你点击它们时，它们会显示内部的数据/信息。
这是指向DEMO的链接，显示出现了什么问题。我甚至可能需要更小的空间来为数据提供更多空间。
修改
忘记添加代码，这里是css：
.section{
width: 900px;
height: 420px;
margin: 20px auto;
position: relative;
}
.data{
padding-top: 9%;
}
.data2{
padding-top: 9%;
}
.data p{
font-size: 40px;
}
/*So this is were I have started to draw the circle*/
/*All you have to do is set the width and height the same and then set the border radius to 50% and you have yourself circle*/
/* The circle */
.ec-circle{
width: 420px;
height: 420px;
-webkit-border-radius: 210px;
-moz-border-radius: 210px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-family:'Kelly Slab', Georgia, serif;
background: #DCF8C6 ;
-webkit-box-shadow:
inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
-moz-box-shadow:
inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
box-shadow:
inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
-webkit-transition: box-shadow 400ms ease-in-out;
-moz-transition: box-shadow 400ms ease-in-out;
-o-transition: box-shadow 400ms ease-in-out;
-ms-transition: box-shadow 400ms ease-in-out;
transition: box-shadow 400ms ease-in-out;
/*For IE < 9 so that we have some kind of effect */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
display: block;
outline: none;
}
.ec-circle-hover{
-webkit-box-shadow:
inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow:
inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
0 0 10px rgba(0,0,0,0.3);
box-shadow:
inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
0 0 10px rgba(0,0,0,0.3);
/*For IE < 9 so that we have some kind of effect */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
h1{
color: white;
position: absolute;
}
.circle{
padding-top: 3%;
}
/* Text inside of circle */
.ec-circle h3{
color: transparent;
font-size: 27px;
margin-top: 4%;
line-height: 10px;
}
.ec-circle-hover h3{
color: white;
transition:all 1s ease;
-webkit-transition-delay:all 100ms ease-in-out;
-moz-transition-delay:all 100ms ease-in-out;
-ms-transition-delay:all 100ms ease-in-out;
-o-transition-delay:all 100ms ease-in-out;
}
.ec-circle-hover .h3c{
color: black;
border-bottom: 1px;
border-color: red;
}
/* The circle */
.ec-circle2{
width: 220px;
height: 220px;
-webkit-border-radius: 210px;
-moz-border-radius: 210px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-family:'Kelly Slab', Georgia, serif;
background: #DCF8C6 ;
-webkit-box-shadow:
inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
-moz-box-shadow:
inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
box-shadow:
inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
-webkit-transition: box-shadow 400ms ease-in-out;
-moz-transition: box-shadow 400ms ease-in-out;
-o-transition: box-shadow 400ms ease-in-out;
-ms-transition: box-shadow 400ms ease-in-out;
transition: box-shadow 400ms ease-in-out;
/*For IE < 9 so that we have some kind of effect */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
display: block;
outline: none;
}
.ec-circle2-hover{
-webkit-box-shadow:
inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow:
inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
0 0 10px rgba(0,0,0,0.3);
box-shadow:
inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
0 0 10px rgba(0,0,0,0.3);
/*For IE < 9 so that we have some kind of effect */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
h1{
color: white;
position: absolute;
}
.circle{
padding-top: 3%;
}
/* Text inside of circle */
.ec-circle2 h3{
color: transparent;
font-size: 27px;
margin-top: 4%;
line-height: 10px;
}
.ec-circle2-hover h3{
color: white;
transition:all 1s ease;
-webkit-transition-delay:all 100ms ease-in-out;
-moz-transition-delay:all 100ms ease-in-out;
-ms-transition-delay:all 100ms ease-in-out;
-o-transition-delay:all 100ms ease-in-out;
}
.ec-circle2-hover .h3c2{
color: black;
border-bottom: 1px;
border-color: red;
}
和html / JavaScript：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover and Click Trigger for Circular Elements with jQuery</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.72835.js"></script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="section">
<div class="normal-trigger-area">
<div id="circle" class="ec-circle">
<div class="data"><p>Kati</p>
<h3 class="h3c">Size</h3>
<h3>- 2023 -</h3>
<h3 class="h3c">Habitat</h3>
<h3>- Mostly forest -</h3>
<h3 class="h3c">Number of Takahe Pairs</h3>
<h3> - 10 -</h3></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.circlemouse.js"></script>
<script type="text/javascript">
$(function() {
$('#circle').circlemouse({
onMouseEnter : function( el ) {
el.addClass('ec-circle-hover');
},
onMouseLeave : function( el ) {
el.removeClass('ec-circle-hover');
},
});
});
</script>
<div class="container">
<div class="wrapper">
<div class="section">
<div class="normal-trigger-area">
<div id="circle2" class="ec-circle2">
<div class="data2"><p>Kati</p>
<h3 class="h3c2">Size</h3>
<h3>- 2023 -</h3>
<h3 class="h3c2">Habitat</h3>
<h3>- Mostly forest -</h3>
<h3 class="h3c2">Number of Takahe Pairs</h3>
<h3> - 10 -</h3></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.circlemouse.js"></script>
<script type="text/javascript">
$(function() {
$('#circle2').circlemouse({
onMouseEnter : function( el ) {
el.addClass('ec-circle-hover2');
},
onMouseLeave : function( el ) {
el.removeClass('ec-circle-hover2');
},
});
});
</script>
</body>
</html>
答案 0 :(得分：3)
更改
el.addClass('ec-circle2-hover');
要
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/group_container">
<com.example.simon.customshapes.CircularImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@drawable/group_circle"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:id="@+id/groupicon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="G"
android:id="@+id/group_letter"
android:layout_centerInParent="true"
android:textColor="@color/white"
android:textSize="24sp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/group_container"
android:layout_toEndOf="@+id/group_container"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:orientation="vertical">
<TextView
android:layout_marginTop="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="16sp"
android:id="@+id/group_name"
tools:text="Golf"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="12sp"
android:id="@+id/group_desc"
tools:text="Sports" />
</LinearLayout>
与removeClass相同。
答案 1 :(得分：3)
首先，您将检查您的身份证和班级名称。 之后你会问问题。
答案 2 :(得分：1)
你的css没有类定义名称“.ec-circle-hover2”
当你悬停时，可以在同一个
之上添加课程名称所以请在css中定义该类（ec-circle-hover2），然后运行代码