Hello Stack Overflow社区,
我想在悬停时添加一个html图标。 这是我的代码:
<div class="country">{% include icons/home/icon-america.html %}</div>
这很好用,但每个悬停时图标必须不同,所以我尝试了这个:
<div class="country">{% include icons/home/icon-{{project.country}}.html %}</div>
这是我的YML:
home:
- {folder: 'thumb_1', name: 'Chaffee', text: 'Hier komt tekst over de chaffee en nog meer', link: 'chaffee.html', country: 'america'}
这不起作用,有没有办法让这项工作? 提前谢谢。
这是我的HTML
<div class="thumb-container">
{% for project in site.data.settings.home %}
<a href="{{project.link}}" class="thumb-unit">
<div class="backPic" style="background-image: url(assets/img/home/{{ project.folder}}/thumb.jpg)"></div>
<h3>{{ project.name}}</h3>
<p>{{ project.text}}</p>
<div class="thumb-overlay"></div>
<div class="country">{% include icons/home/icon-america.html %}</div>
</a>
{% endfor %}
</div>
维姆
答案 0 :(得分:0)
我通过将svg放在一个单独的文件夹中解决了这个问题,然后像这样链接到它们:
{folder: 'thumb_1', country: 'america', name: 'M24 Chaffee', text: 'Hier komt tekst over de chaffee en nog meer', link: 'chaffee.html'}
和html一样:
<img src="assets/img/home_icons/{{ project.country}}/icon.svg" alt="" />