Question

我无法将文字调整为居中对齐。我试图将css代码放在onmouseover="hover('')"中，但它不起作用。有什么可以解决这个问题？

id =“content”的中间圈，用于更改悬停

标记

<div id="circle">
    <p id="content">
        <b><span>Services</span></b>
    </p>
</div>

我在html标记中包含的JS代码，用于更改悬停时的内容

<a href="">
    <div onmouseover="hover('<b>BPO</b>')" onmouseout="hover('<b>Services</b>')" class="scaling" id="circle-2">
        <img src="/static/img/2.png" onmouseover="this.src='/static/img/2b.png'" onmouseout="this.src='/static/img/2.png'" style="margin-top:5px;" width=100px/>
    </div>
</a>
<a href="">
    <div onmouseover="hover('<b>Web Development</b>')" onmouseout="hover('<b>Services</b>')" class="scaling" id="circle-3">
        <img src="/static/img/4.png" onmouseover="this.src='/static/img/4b.png'" onmouseout="this.src='/static/img/4.png'" style="margin-top:5px;" width=100px/>
    </div>
</a>

JS代码，用于更改代码

的内容

function hover(description) {
    console.log(description);
    document.getElementById('content').innerHTML = description;
}

一切正常但我无法将文本调整为中心，而不是标签长度。主要问题是如何在onmouseover="hover('')"

中添加css代码

What i want it to look like

what it looks like

Answer 1

您的代码确实需要大量清理工作。

您应该分开HTML，CSS和JavaScript。执行此操作后，调试变得更加容易，代码更容易遵循。

此外，您的代码中存在大量重复内容。同样，使用CSS和JavaScript可以消除冗余。例如，样式是使用CSS而不是HTML完成的。像这样的标签已弃用，不应再使用了。通过创建包含font-weight:bold的CSS样式并正确应用这些样式，我们可以删除所有和标记。

// Get all DOM references:
var content = document.getElementById('content');
var cir2 = document.getElementById("circle-2");
var cir3 = document.getElementById("circle-3");

var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");

// Attach event handlers:
cir2.addEventListener("mouseover", function(){ hover('BPO') });
cir2.addEventListener("mouseout", function(){ hover('Services') });

cir3.addEventListener("mouseover", function(){ hover('Web Development') });
cir3.addEventListener("mouseout", function(){ hover('Services') });

img1.addEventListener("mouseover", function(e){ changeSource(e,'http://plumseattle.com/wp-content/uploads/2016/01/linkedin-logo.jpg') });
img1.addEventListener("mouseout", function(e){ changeSource(e, 'https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-256.png') });

img2.addEventListener("mouseover", function(e){ changeSource(e, 'http://seeklogo.com/images/S/snapchat-logo-2D9C3E7ADA-seeklogo.com.png') });
img2.addEventListener("mouseout", function(e){ changeSource(e, 'https://www.seeklogo.net/wp-content/uploads/2011/06/Twitter-icon-vector-400x400.png') });

function hover(description) {
        //console.log(description);
        content.textContent = description;
}

function changeSource(evt, source){
  evt.target.src = source;
}

content > span { font-weight: bold;}
.scaling { font-weight:bold; }
.img { margin-top:5px;width:100px; }

<div id="circle">
 <p id="content">
    <span>Services</span>
 </p>
</div>

<a href="">
 <div class="scaling" id="circle-2">
   <img id="img1" 
        src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-256.png" 
        class="img">
 </div>
</a>

<a href="">
 <div class="scaling" id="circle-3">
   <img id="img2" 
        src="https://www.seeklogo.net/wp-content/uploads/2011/06/Twitter-icon-vector-400x400.png" 
        class="img">
  </div>
</a>

Answer 2

通常情况下，如果您想要某些元素可以收听＆＃34;鼠标悬停＆＃34;事件，最好的方法是使用EventTarget#addEventListener。就像this：

一样

const node = document.getElementById('hover');

node.addEventListener('mouseover', () => {
    node.innerText = `Last time mouseover'd at ${new Date()}.`;
});

因此，现在，您需要在鼠标光标下更新图像的#content和src属性的子项。

HTML看起来像这样：

<p id="content">
  Services
</p>

<a href="">
  <div class="scaling" id="circle-2">
    <img src="/static/img/2.png" />
  </div>
</a>
<a href="">
  <div class="scaling" id="circle-3">
    <img src="/static/img/2.png" />
  </div>
</a>

虽然JS代码看起来像这样：

const content = document.getElementById('content');
const circle2 = document.getElementById('circle-2');
const circle3 = document.getElementById('circle-3');

circle2.addEventListener('mouseover', () => {
  circle2.children[0].src = '/static/img/2b.png';
  content.innerText = 'BPO';
});

circle2.addEventListener('mouseout', () => {
  circle2.children[0].src = '/static/img/2.png';
  content.innerText = 'Services';
});

circle3.addEventListener('mouseover', () => {
  circle3.children[0].src = '/static/img/4b.png'
  content.innerText = 'Web Development';
});

circle3.addEventListener('mouseout', () => {
  circle3.children[0].src = '/static/img/4.png'
  content.innerText = 'Services';
});

（查看this fiddle）。

如何在onmouseover中添加css代码=“hover（''）”[JS]

2 个答案: