Question

请看一下我的jsfiddle示例，请帮助我将鼠标悬停在跨栏文本上时如何保持按钮背景。当我将鼠标悬停在按钮上时，按钮更改背景 - button_active.gif，但问题是当我将鼠标悬停在跨度上时，因为按钮的背景已更改。

{{1}}

Answer 1

使用css设置背景图像。 javascript是一种非常复杂的方式。

然后，您的悬停效果可以在文本颜色的同时更改背景图像。

（如果您需要使用javascript，请在a标签上调用javascript，而不是在图片上调用）

Answer 2

<div class="button">
  <a href="#" title="Opširnije...">
 	<span>Više</span>
	</a>
</div>

private static Credential authorize() throws Exception {
    HttpTransport httpTransport = GoogleNetHttpTransport.newTrustedTransport();
    JsonFactory jsonFactory = JacksonFactory.getDefaultInstance();

    String SERVICE_ACCOUNT_EMAIL = "xxx@developer.gserviceaccount.com";
    List<String> SCOPES = Arrays.asList("https://spreadsheets.google.com/feeds/");

    GoogleCredential credential = new GoogleCredential.Builder().setTransport(httpTransport)
            .setJsonFactory(jsonFactory).setServiceAccountId(SERVICE_ACCOUNT_EMAIL).setServiceAccountScopes(SCOPES)
            .setServiceAccountPrivateKeyFromP12File(
                    new java.io.File("xxx.p12"))
            .setServiceAccountUser("xx@zzz.com")
            .build();
    return credential;
}

public static void main(String[] args) throws Exception {

    Credential credential = authorize();
    SpreadsheetService service = new SpreadsheetService("new data service ");
    service.setProtocolVersion(SpreadsheetService.Versions.V3);
    service.setOAuth2Credentials(credential);
    // Define the URL to request.  This should never change.
    URL SPREADSHEET_FEED_URL = new URL(
        "https://spreadsheets.google.com/feeds/spreadsheets/private/full");

    // Make a request to the API and get all spreadsheets.
    SpreadsheetFeed feed = service.getFeed(SPREADSHEET_FEED_URL, SpreadsheetFeed.class);
    List<SpreadsheetEntry> spreadsheets = feed.getEntries();

    // Iterate through all of the spreadsheets returned
    for (SpreadsheetEntry spreadsheet : spreadsheets) {
      // Print the title of this spreadsheet to the screen
      System.out.println(spreadsheet.getTitle().getPlainText());
    }

Answer 3

您的图片位于图片的顶部，因此它正在捕获自己的悬停事件，这会使图片的悬停事件无效（一次只能悬停一个元素）。

选项1（无需重新编写代码）

一种解决方案是将pointer-events: none添加到span的CSS中。这意味着指针根本不与跨度交互。注意：这也意味着无法点击或选择跨度！

＆＃13;

.button span {
  font-family: 'Georgia';
  text-transform: uppercase;
  font-size: 13px;
  color: #FFFFFF;
  position: absolute;
  top: 20px;
  left: 40px;
  z-index: 2;
  pointer-events: none; /* this causes the hover event for span not to trigger */
}
.button:hover span,
.button:hover:before {
  color: #88bfaa;
}

＆＃13;

<div class="button">
  <a href="#" title="Opširnije...">
    <span>Više</span>
    <img src="http://mile.x3.rs/mile/palma/img/button.gif" onmouseover="this.src='http://mile.x3.rs/mile/palma/img/button_active.gif'" onmouseout="this.src='http://mile.x3.rs/mile/palma/img/button.gif'">
  </a>
</div>

＆＃13;

选项2（更清洁的解决方案）

更好的解决方案是在整个a标记上设置悬停事件（因为这是您希望它们单击的那个！），并且使用CSS而不是JavaScript来执行此操作。在这种情况下，使用背景图像而不是img标记也会更好。以下是一个示例实现。

＆＃13;

.button {
  display: block;
  background: url('http://mile.x3.rs/mile/palma/img/button.gif');
  /* these are the dimensions of button.gif */
  width: 103px;
  height: 51px;
}
.button span {
  font-family: 'Georgia';
  text-transform: uppercase;
  font-size: 13px;
  color: #FFFFFF;
  position: absolute;
  top: 20px;
  left: 40px;
  z-index: 2;
}

.button:hover span {
  color: #88bfaa;
}
.button:hover {
  background: url('http://mile.x3.rs/mile/palma/img/button_active.gif');
}

＆＃13;

<!-- the HTML is much simpler! it contains content only, no decoration -->
<a href="#" title="Opširnije..." class="button">
  <span>Više</span>
</a>

＆＃13;

我不想在<span>悬停上更改按钮背景

3 个答案: