javascript - 将鼠标悬停在帖子链接上时，我可以使用帖子缩略图作为光标图像吗？ (文字出版社)

Question

我对 javascript、php 和 wordpress 太陌生了，无法自己解决这个问题，所以也许有人可以帮助我。

我正在 wordpress 上制作投资组合页面。所有帖子标题都在 sidebar.php 文件中循环。我想做到这一点，当您将鼠标悬停在帖子标题上时，光标会变为帖子的特色图片/帖子缩略图。

谷歌搜索最常见的结果是简单的 css 版本，如下所示:

.sidebar {cursor:url('img.png') auto}

所以我有这个:

.sidebar a:hover{
    cursor:url('<?php if(has_post_thumbnail()){
    the_post_thumbnail('thumbnail');}?>') auto;
    border-bottom: 2px dashed;
    border-color: blue;

但它不起作用。当放入任何 php 文件(例如 sidebar.php)时，php 就可以工作，然后缩略图位于帖子标题下。

我找到的另一个选项是一个 javascript 选项，它在这个页面上:

http://www.ajaxblender.com/howto-create-custom-image-cursors.html

#test-area {
height: 200px;
border: 3px dashed #CCCCCC;
background: #FFFFFF;
padding: 20px;
cursor: url(./blank.cur), none;
}

#mycursor {
cursor: none;
width: 97px;
height: 137px;
background: url("images/custom-cursor.jpg") no-repeat left top;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10000;
}

<script type="text/javascript">
$(document).ready(function(){
    $('#test-area').mouseout(function(){
        $('#mycursor').hide();
        return >false;
    });
    $('#test-area').mouseenter(function(){
        $('#mycursor').show();
        return >false;
    });
    $('#test-area').mousemove(function(e){
        $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
    });
});
</script>

但我认为它只适用于 div 而不是链接？根本无法让它工作，尽管这样的事情似乎是最合乎逻辑的解决方案。

然后是this page , 这显示了一个 javascript 就在 <a href> 的中间像这样的标签:

<a onmousemove=\"javascript:setElementCursor(this);\" href=\"#\">Set the cursor for this link </a>

但是在其中实现一个 php post_thumbnail 或其他东西对我来说已经太多了。 (无论如何，斜线是怎么回事？)

有什么想法吗？

Answer 1

无法想象你为什么要做你想做的事，但试试这个:

在 header.php 中

<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'YOUR_THUMB _SIZE' );
?>

现在你的 CSS 也必须放在 header.php 中

.sidebar a:hover{
    cursor:url('<?php echo $thumb['0']; ?>') auto;
    border-bottom: 2px dashed;
    border-color: blue;
}