极客观点
项目管理
HarmonyOS
<!--内容开始-->
<div class="grid grid-cols-3 gap-4{% if pagination.total_size == 0 %} hidden{% endif %}">
{% for item in result %}
<!-- iterator -->
<div
class="article-item bg-white p-4 rounded-lg"
data-id="{{item.entry.id}}"
x-data="{entry: {id: '{{item.entry.id}}', cover: '{{item.thumbnail}}', title: '{{item.entry.title}}', original: '{{item.original}}', showmenu: false }}">
<div class="article-header flex pointer-events-none border-2 border-red-500">
<div class="flex items-center w-4/5">
<img class="w-10 h-10 rounded-full" src="/static/img/rss.png" />
<div class="font-medium dark:text-white ml-4">
<h4><a href="/channel/{{item.channel.id}}">{{ item.channel.name }}</a></h4>
<span class="text-sm text-slate-500">{{ item.entry.publish_datetime }}</span>
</div>
</div>
<div class="flex items-center justify-end w-1/5">
<div class="relative">
<button
@click="entry.showmenu = !entry.showmenu;"
@keydown.escape="entry.showmenu = false"
type="button"
class="text-slate-500 font-medium text-sm p-2.5 text-center inline-flex items-center focus:border-gray-300 focus:outline-1 focus:outline-gray-200 focus:text-sky-700">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
</svg>
</button>
<div x-show="entry.showmenu">
<ul
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click.outside="closeEntryMenu(entry);"
@keydown.escape="closeEntryMenu(entry);"
class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md z-40"
aria-label="submenu"
>
<li class="flex">
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-sky-700 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#" >
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
<span>收藏</span>
</a>
</li>
<li class="flex">
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-sky-700 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#" >
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
</svg>
<span>分享</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="article-body mt-4 border-2 border-blue-500">
<div class="block relative">
<div class="group h-[300px]">
<img class="rounded-lg w-full h-full object-cover album-lazyload" src="/static/img/image_cover.jpg" :data-album-cover="entry.cover" alt="image description" loading="lazy" />
<div class="absolute top-0 left-0 w-full h-0 flex flex-col justify-center items-center bg-sky-700 opacity-0 rounded-lg group-hover:h-full group-hover:opacity-100 duration-500">
<div class="m-8 h-full flex items-center justify-center">
<div>
<h1 class="text-xl font-semibold text-white mb-4">
<a :href="'/entry/'+ entry.id" x-html="entry.title"></a>
</h1>
<p class="mt-8 text-center">
<button @click="$dispatch('init-thumbnail-model', entry);" type="button" class="text-white bg-sky-800 hover:bg-sky-900 focus:ring-4 focus:outline-none focus:ring-sky-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-sky-800 me-2 mb-2">
<svg class="h-6 w-6 text-white mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
</svg>
查看原图
</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- iterator -->
{% endfor %}
</div>版本: tailwind css 3.x.
问题: 在鼠标移到article-header上时也触发了article-body中定义的group-hover
截图:
问题出在: absolute下的元素盖在了：article-header