Question

我有一些img标记，其中包含班级名称box，以及一个p标记，其中包含班级title，我需要更改mouseover并更改文字已点击的p alt属性的img标记内容，请帮助我。

<table style="width:100%;padding-top:200px;border-bottom:5px solid black;">
    <tr style="text-align:right;width:100%;font-size:small;text-align:center;">
        <td class="box" style="width:22%;">
            <a href="http://xxxxxx.com">
                <img src="Images/photo_2016-06-21_12-13-45.jpg" alt="link1" class="imgLogo" />
            </a>
        </td> 
        <td  class="box" style="width:22%;">
            <a href="http://xxxxxxxxx.com">
                <img src="Images/photo_2016-06-21_12-13-18.jpg" alt="link2" class="imgLogo" data-tree="oak" onmouseover="reply_click(this);"/>
            </a>
        </td>
        <td class="box" style="width:22%">
            <a href="http://xxxxx.com/pwa">
                <img src="Images/photo_2016-06-21_12-14-00.jpg" alt="link3" class="imgLogo" /> 
            </a> 
        </td>
        <td class="box" style="width:22%">
            <a href="http://xxxx.com">
                <img src="Images/photo_2016-06-21_12-13-51.jpg" alt="link4" class="imgLogo" /> 
            </a> 
        </td>
    </tr>
</table>

和我的p标签：

<p style="text-align: center" id="title-links" class="title-links">content here</p>

我想用javascript编写它，我不想使用jQuery。

Answer 1

 $(".imgLogo").on("mouseenter", function() {
     $("#title-links").text($(this).attr("alt"));
 });

另外，请注意您在课程中提供的课程名称与您在代码中提供的课程名称不同...

此代码在onmouseover

上也不需要img HTML属性

Answer 2

将此脚本放入您的页面。

function reply_click(e) {
    $('.title').text(e.alt);
}

Answer 3

使用onmouseover和onmouseout

脚本

function showalt(elem){ $('#title-links').text(elem.alt); }

function showdefault(elem){$('#title-links').text('سیستم مدیریت جلسات');}

<强> Here is a demo

在删除鼠标默认<p>标记内容时，将显示

Answer 4

我使用javascript编写了这个问题的解决方案。

将 onmouseover 和 onmouseout 事件属性添加到img标记中。如下：

<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="سیستم مدیریت جلسات" class="imgLogo" onmouseover="changeText(this)" onmouseout="changeTextToDefault()"/>

在此之后，添加以下与上述鼠标事件相关联的js函数。

当鼠标指针越过显示的img标记时，将执行 changeText（）函数。之后，它会将 p 标记的文本内容更改为 img 标记上 alt 属性的值。

function changeText(xTag){ document.getElementById("title-links").innerHTML =xTag.getAttribute("alt");}

此外， changeTextToDefault（）函数将在鼠标指针停留在显示的img标记上时执行。并且，它会将 p 标记的文本内容更改为默认文本。

function changeTextToDefault(){ document.getElementById("title-links").innerHTML = "سیستم مدیریت جلسات";}

Here is demo

将鼠标悬停时的文本内容更改为img alt属性

4 个答案: