首页 > 如何用CSS实现鼠标滑过label时让其包裹的span标签显示

如何用CSS实现鼠标滑过label时让其包裹的span标签显示

html我是这样写的:

<label class="label label_tasker_other">123<span style="display: none;">&nbsp;&times;</span></label>

css是这样:

<style>
    .label_tasker_other{
        cursor: pointer;
    }
    .label_tasker_other:hover span{
        display: block;
    }
</style>

我想让鼠标划过label的时候,就让其中的那个span标签显示出来,鼠标移除的时候,span就隐藏。
但是试了一下发现并不起作用,请问是哪里出错了啊?或者有什么其他的方法可以实现这个效果吗?(最好是通过CSS实现)
谢谢


<style>
    .label_tasker_other{
        cursor: pointer;
    }
    .label_tasker_other:hover .close{
        display: block;
    }

    .label_tasker_other .close{
        display: none;
    }
</style>

<label class="label label_tasker_other">123<span class="close">&nbsp;&times;</span></label>

内联样式高于外部样式!

试试这个:

.label_task_other span{display:none;}
.label_task_other:hover span{display:block;}

应该是css选择器优先级的问题,内联样式的优先级会比较高
给span加上class,在外联样式里给这个class添加样式

【热门文章】
【热门文章】