【发布时间】：2026-02-05 18:25:01
【问题描述】：
我正在寻求开发一种自适应卡片，该卡片将根据用户选择的星数采用 1 到 5 范围内的用户输入值。
我还想在用户悬停在星星上时应用动画。例如，如果用户从左到右悬停到第 4 颗星，那么我希望选择第 1 到 4 颗星。同样，如果用户将鼠标左移到第二颗星，那么我希望取消选择第三颗和第四颗星。有关示例，请参见下面的链接。
但是，鉴于自适应卡片纯粹是声明性的（即不允许使用代码），是否可以开发一个？如果是这样，请您指出正确的方向吗？
请参阅下面的链接，了解我希望如何将其呈现给用户的示例（使用自适应卡片清楚），
Codepen - Ash Durham 的代码笔
HTML
<span class="rating_stars rating_0">
<span class='s' data-low='0.5' data-high='1'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='1.5' data-high='2'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='2.5' data-high='3'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='3.5' data-high='4'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='4.5' data-high='5'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='r r0_5' data-rating='1' data-value='0.5'></span>
<span class='r r1' data-rating='1' data-value='1'></span>
<span class='r r1_5' data-rating='15' data-value='1.5'></span>
<span class='r r2' data-rating='2' data-value='2'></span>
<span class='r r2_5' data-rating='25' data-value='2.5'></span>
<span class='r r3' data-rating='3' data-value='3'></span>
<span class='r r3_5' data-rating='35' data-value='3.5'></span>
<span class='r r4' data-rating='4' data-value='4'></span>
<span class='r r4_5' data-rating='45' data-value='4.5'></span>
<span class='r r5' data-rating='5' data-value='5'></span>
</span>
<div class="values">
<div>
<label>Rating</label><input type="text" id="rating" value="0" />
</div>
<div>
<label>Rating Value</label><input type="text" name="rating" id="rating_val" value="0" />
</div>
</div>
<div class="info">
<p>The above textboxes should be hidden fields, but have been made textboxes to display the values when you click.</p>
<p>The 'Rating' value can be used for class/id based changes to this if wanting to use a background sprite to manage the stars instead.</p>
</div>
CSS
.rating_stars {
margin-top: 15px;
display: inline-block;
font-size: 20px;
font-weight: 200;
color: #918f8f;
position: relative;
}
.rating_stars span .fa, .rating_stars span.active-low .fa-star-o, .rating_stars span.active-high .fa-star-o{
display: none;
}
.rating_stars span .fa-star-o{
display: inline-block;
}
.rating_stars span.s.active-high .fa-star{
display: inline-block; color: #feb645;
}
.rating_stars span.s.active-low .fa-star-half-o{
display: inline-block; color: #feb645;
}
.rating_stars span.r {
position: absolute;
top: 0;
height: 20px;
width: 10px;
left: 0;
}
.rating_stars span.r.r0_5 {left:0px;}
.rating_stars span.r.r1 {left:10px; width: 11px;}
.rating_stars span.r.r1_5 {left:21px; width: 13px;}
.rating_stars span.r.r2 {left:34px; width: 12px;}
.rating_stars span.r.r2_5 {left:46px; width: 12px;}
.rating_stars span.r.r3 {left:58px; width: 11px;}
.rating_stars span.r.r3_5 {left:69px; width: 12px;}
.rating_stars span.r.r4 {left:81px; width: 12px;}
.rating_stars span.r.r4_5 {left:93px; width: 12px;}
.rating_stars span.r.r5 {left:105px; width: 12px;}
/* Just to make things look pretty ;) */
html, body {
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 100%;
color: #eee;
background: #7d7e7d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjN2Q3ZTdkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(135deg, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
label {width: 100px;display: inline-block; text-align: right; margin-right: 10px;}
input {width: 50px; text-align: center;}
.values {margin-top: 20px;}
.info {max-width: 500px; margin: 20px auto;}
JS
jQuery(document).ready(function($) {
$('.rating_stars span.r').hover(function() {
// get hovered value
var rating = $(this).data('rating');
var value = $(this).data('value');
$(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating);
highlight_star(value);
}, function() {
// get hidden field value
var rating = $("#rating").val();
var value = $("#rating_val").val();
$(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating);
highlight_star(value);
}).click(function() {
// Set hidden field value
var value = $(this).data('value');
$("#rating_val").val(value);
var rating = $(this).data('rating');
$("#rating").val(rating);
highlight_star(value);
});
var highlight_star = function(rating) {
$('.rating_stars span.s').each(function() {
var low = $(this).data('low');
var high = $(this).data('high');
$(this).removeClass('active-high').removeClass('active-low');
if (rating >= high) $(this).addClass('active-high');
else if (rating == low) $(this).addClass('active-low');
});
}
});
谢谢
【问题讨论】：
标签： adaptive-cards